.vkuibright_light, :root, [scheme="bright_light"], body[scheme="bright_light"] { --accent: #2688eb; --action_sheet_action_foreground: #2688eb; --attach_picker_tab_active_background: #2d81e0; --attach_picker_tab_active_text: #2d81e0; --attach_picker_tab_inactive_background: #f2f3f5; --background_highlighted: rgba(0, 0, 0, 0.08); --background_hover: rgba(0, 0, 0, 0.04); --background_keyboard: #e1e3e6; --background_light: #f9f9f9; --background_page: #ebedf0; --background_text_highlighted: rgba(38, 136, 235, 0.2); --button_bot_shadow: #c4c8cc; --button_muted_background: #f2f3f5; --button_muted_foreground: #2688eb; --button_outline_border: #2688eb; --button_outline_foreground: #2688eb; --button_primary_background: #2d81e0; --button_secondary_background: rgba(0, 28, 61, 0.05); --button_secondary_background_highlighted: rgba(0, 28, 61, 0.03); --button_secondary_destructive_background: rgba(0, 28, 61, 0.05); --button_secondary_destructive_background_highlighted: rgba(0, 28, 61, 0.03); --button_secondary_destructive_foreground_highlighted: rgba(230, 70, 70, 0.6); --button_secondary_foreground: #2688eb; --button_secondary_foreground_highlighted: rgba(38, 136, 235, 0.6); --button_tertiary_foreground: #2d81e0; --cell_button_foreground: #2688eb; --content_tint_background: #f5f5f5; --content_tint_foreground: #7f8285; --content_warning_background: #fff2d6; --control_background: #ebedf0; --control_foreground: #5181b8; --control_tint_muted: #76787a; --counter_primary_background: #2688eb; --counter_secondary_background: #aeb7c2; --feed_recommended_friend_promo_background: #528bcc; --field_background: #f2f3f5; --field_border: rgba(0, 0, 0, 0.12); --float_button_background: #f5f5f5; --float_button_background_highlighted: #ebedf0; --float_button_border: rgba(0, 0, 0, 0.05); --header_alternate_tab_active_indicator: #2688eb; --header_search_field_background: #ebedf0; --header_tab_active_indicator: #2688eb; --header_tint: #2688eb; --header_tint_alternate: #2688eb; --icon_medium: #818c99; --icon_name: #74a2d6; --icon_tertiary: #b8c1cc; --im_attach_tint: #2d81e0; --im_bubble_border_alternate: #e1e3e6; --im_bubble_border_alternate_highlighted: #d7d8d9; --im_bubble_button_background: #f9f9f9; --im_bubble_button_background_highlighted: #d7d8d9; --im_bubble_button_outgoing_background: hsla(0, 0%, 100%, 0.6); --im_bubble_incoming: #ebedf0; --im_bubble_incoming_alternate_highlighted: #f9f9f9; --im_bubble_incoming_highlighted: #d7d8d9; --im_bubble_outgoing_alternate_highlighted: #f9f9f9; --im_bubble_wallpaper_button_background: #f2f3f5; --im_bubble_wallpaper_button_background_highlighted: #e1e3e6; --im_bubble_wallpaper_incoming_highlighted: #ebedf0; --im_forward_line_tint: rgba(69, 103, 143, 0.24); --im_reply_separator: #2d81e0; --im_text_name: #2d81e0; --input_background: #f2f3f5; --input_border: #e1e3e6; --landing_field_background: #f2f3f5; --landing_login_button_background: #2d81e0; --landing_primary_button_background: #2d81e0; --landing_secondary_button_foreground: #2688eb; --landing_snippet_border: rgba(0, 0, 0, 0.15); --landing_tertiary_button_foreground: #2d81e0; --landing_text_title: #2d81e0; --link_alternate: #2d81e0; --loader_background: #ebedf0; --loader_track_fill: #e1e3e6; --loader_track_value_fill: #528bcc; --overlay_status_background: #ebedf0; --overlay_status_foreground: #6d7885; --panel_tab_active_background: #ebedf0; --panel_tab_active_text: #5d5f61; --placeholder_icon_background_opaque: #f2f3f5; --placeholder_icon_tint: #001c3d; --poll_option_background: #45678f; --primary_overlay_badge: rgba(0, 0, 0, 0.6); --search_bar_background: #fff; --search_bar_field_background: #ebedf0; --selection_off_icon: #b8c1cc; --separator_alternate: #e1e3e6; --separator_common: #d7d8d9; --skeleton_foreground_from: #f5f5f5; --skeleton_foreground_to: #e1e3e6; --skeleton_shimmer_to: #fff; --snippet_border: rgba(0, 0, 0, 0.15); --snippet_icon_tertiary: #c4c8cc; --splashscreen_icon: #e1e3e6; --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0.2); --stories_create_button_background_from: #f2f3f5; --stories_create_button_background_to: #e1e3e6; --stories_create_button_foreground: #6d7885; --stories_skeleton_loader_background: #c4c8cc; --switch_ios_off_border: #e1e3e6; --tabbar_active_icon: #2975cc; --tabbar_background: #f9f9f9; --tabbar_tablet_active_icon: #2975cc; --tabbar_tablet_background: #f9f9f9; --tabbar_tablet_text_secondary: #909499; --text_link: #2d81e0; --text_muted: #2c2d2e; --text_name: #2d81e0; --text_subhead: #6d7885; --toolbar_attach_background_from: #b8c1cc; --toolbar_attach_background_to: #a3adb8; --vk_connect_button_primary_background: #19191a; --vk_connect_button_secondary_background: #f2f3f5; --vk_connect_button_secondary_foreground: #19191a; --writebar_icon: #2688eb; } .vkuibright_light, .vkuivkcom_light, :root, [scheme="bright_light"], [scheme="vkcom_light"], body[scheme="bright_light"], body[scheme="vkcom_light"] { --accent_alternate: #07f; --action_sheet_separator: rgba(0, 0, 0, 0.12); --activity_indicator_tint: #aeb7c2; --attach_picker_tab_active_icon: #fff; --attach_picker_tab_inactive_icon: #818c99; --attach_picker_tab_inactive_text: #818c99; --background_content: #fff; --background_suggestions: #fff; --button_primary_foreground: #fff; --button_secondary_destructive_foreground: #e64646; --content_placeholder_icon: #99a2ad; --content_placeholder_text: #818c99; --control_background_secondary: #fff; --control_tint: #fff; --counter_primary_text: #fff; --counter_secondary_text: #fff; --destructive: #e64646; --dynamic_purple: #735ce6; --dynamic_raspberry_pink: #e03fab; --dynamic_violet: #792ec0; --field_error_background: #faebeb; --field_text_placeholder: #818c99; --float_button_foreground: #99a2ad; --header_alternate_background: #fff; --header_alternate_tab_active_text: #000; --header_alternate_tab_inactive_text: #99a2ad; --header_background: #fff; --header_background_before_blur: #fff; --header_background_before_blur_alternate: #fff; --header_search_field_tint: #818c99; --header_tab_active_background: transparent; --header_tab_active_text: #000; --header_tab_inactive_text: #99a2ad; --header_text: #000; --header_text_alternate: #000; --header_text_secondary: #818c99; --icon_alpha_placeholder: #fff; --icon_medium_alpha: rgba(0, 0, 0, 0.48); --icon_outline_medium: #818c99; --icon_outline_secondary: #99a2ad; --icon_secondary: #99a2ad; --icon_secondary_alpha: rgba(0, 0, 0, 0.36); --icon_tertiary_alpha: rgba(0, 0, 0, 0.24); --im_bubble_button_foreground: #000; --im_bubble_gift_background: #f4e7c3; --im_bubble_gift_background_highlighted: #e3d3ac; --im_bubble_gift_text: #857250; --im_bubble_gift_text_secondary: #ab9871; --im_bubble_incoming_alternate: #fff; --im_bubble_incoming_expiring: #e6e9ff; --im_bubble_incoming_expiring_highlighted: #ccd3ff; --im_bubble_outgoing: #cce4ff; --im_bubble_outgoing_alternate: #fff; --im_bubble_outgoing_expiring: #ccd3ff; --im_bubble_outgoing_expiring_highlighted: #adb8ff; --im_bubble_outgoing_highlighted: #add3ff; --im_bubble_wallpaper_button_foreground: #000; --im_bubble_wallpaper_incoming: #fff; --im_bubble_wallpaper_outgoing: #cce4ff; --im_bubble_wallpaper_outgoing_highlighted: #add3ff; --im_service_message_text: #818c99; --im_toolbar_separator: #001c3d; --im_toolbar_voice_msg_background: #99a2ad; --image_border: rgba(0, 0, 0, 0.08); --landing_background: #fff; --landing_field_placeholder: #818c99; --landing_login_button_foreground: #fff; --landing_primary_button_foreground: #fff; --landing_secondary_button_background: rgba(0, 57, 115, 0.1); --landing_text_primary: #000; --landing_text_secondary: #818c99; --like_text_tint: #ff3347; --modal_card_background: #fff; --modal_card_border: transparent; --modal_card_header_close: #000; --music_playback_icon: #000; --overlay_status_icon: #818c99; --placeholder_icon_background: rgba(0, 28, 61, 0.08); --placeholder_icon_foreground_primary: #99a2ad; --placeholder_icon_foreground_secondary: #aeb7c2; --search_bar_field_tint: #818c99; --search_bar_segmented_control_tint: #818c99; --secondary_overlay_badge: rgba(0, 0, 0, 0.24); --segmented_control_bar_background: transparent; --segmented_control_tint: #99a2ad; --separator_alpha: rgba(0, 0, 0, 0.12); --skeleton_shimmer_from: #fff; --snippet_background: #fff; --stories_create_button_icon_background: #fff; --tabbar_inactive_icon: #99a2ad; --tabbar_tablet_inactive_icon: #99a2ad; --tabbar_tablet_text_primary: #000; --text_action_counter: #818c99; --text_link_highlighted_background: #000; --text_placeholder: #818c99; --text_primary: #000; --text_secondary: #818c99; --text_tertiary: #99a2ad; --vk_connect_button_primary_foreground: #fff; } .vkuibright_light, .vkuispace_gray, .vkuivkcom_dark, .vkuivkcom_light, :root, [scheme="bright_light"], [scheme="space_gray"], [scheme="vkcom_dark"], [scheme="vkcom_light"], body[scheme="bright_light"], body[scheme="space_gray"], body[scheme="vkcom_dark"], body[scheme="vkcom_light"] { --button_commerce_background: #4bb34b; --button_commerce_foreground: #fff; --button_tertiary_background: transparent; --counter_prominent_background: #ff3347; --counter_prominent_text: #fff; --dynamic_neon_pink: #f45fff; --dynamic_orange: #ffa000; --dynamic_red: #ff3347; --field_valid_border: #4bb34b; --landing_field_border: transparent; --landing_tertiary_button_background: transparent; --media_overlay_button_background: #fff; } .vkuibright_light, .vkuispace_gray, :root, [scheme="bright_light"], [scheme="space_gray"], body[scheme="bright_light"], body[scheme="space_gray"] { --content_positive_background: rgba(75, 179, 75, 0.15); --dynamic_blue: #2688eb; --dynamic_gray: #a3adb8; --loader_tint: #76787a; --media_overlay_button_foreground: #2c2d2e; --panel_tab_inactive_text: #76787a; } .vkuibright_light, .vkuispace_gray, .vkuivkcom_dark, :root, [scheme="bright_light"], [scheme="space_gray"], [scheme="vkcom_dark"], body[scheme="bright_light"], body[scheme="space_gray"], body[scheme="vkcom_dark"] { --dynamic_green: #4bb34b; } .vkuibright_light, .vkuivkcom_dark, .vkuivkcom_light, :root, [scheme="bright_light"], [scheme="vkcom_dark"], [scheme="vkcom_light"], body[scheme="bright_light"], body[scheme="vkcom_dark"], body[scheme="vkcom_light"] { --field_error_border: #e64646; } .vkuispace_gray, [scheme="space_gray"], body[scheme="space_gray"] { --accent: #529ef4; --action_sheet_separator: hsla(0, 0%, 100%, 0.12); --activity_indicator_tint: #5d5f61; --attach_picker_tab_active_icon: #19191a; --attach_picker_tab_inactive_background: #2c2d2e; --attach_picker_tab_inactive_text: #76787a; --background_content: #19191a; --background_hover: hsla(0, 0%, 100%, 0.04); --background_keyboard: #2c2d2e; --background_light: #232324; --background_page: #0a0a0a; --background_suggestions: #2c2d2e; --background_text_highlighted: rgba(82, 158, 244, 0.24); --button_bot_shadow: #19191a; --button_muted_background: #2c2d2e; --button_primary_foreground: #19191a; --button_secondary_background: #454647; --button_secondary_background_highlighted: rgba(69, 70, 71, 0.6); --button_secondary_destructive_background: #454647; --button_secondary_destructive_background_highlighted: rgba(69, 70, 71, 0.6); --button_secondary_destructive_foreground_highlighted: rgba(255, 92, 92, 0.6); --button_secondary_foreground_highlighted: hsla(216, 9%, 89%, 0.6); --content_placeholder_icon: #aaaeb3; --content_placeholder_text: #aaaeb3; --content_tint_background: #232324; --content_tint_foreground: #909499; --content_warning_background: #857250; --control_background: #454647; --control_background_secondary: #76787a; --control_tint: #19191a; --control_tint_muted: #909499; --counter_primary_text: #19191a; --counter_secondary_background: #76787a; --counter_secondary_text: #19191a; --feed_recommended_friend_promo_background: #6d7885; --field_background: #232324; --field_border: hsla(0, 0%, 100%, 0.12); --field_error_background: #522e2e; --field_error_border: #ff5c5c; --field_text_placeholder: #76787a; --float_button_background: #454647; --float_button_background_highlighted: #5d5f61; --float_button_foreground: #aaaeb3; --header_alternate_background: #2c2d2e; --header_alternate_tab_inactive_text: #76787a; --header_background: #19191a; --header_background_before_blur: #070708; --header_background_before_blur_alternate: #070708; --header_search_field_background: #363738; --header_search_field_tint: #aaaeb3; --header_tab_active_background: #5d5f61; --header_tab_active_indicator: #529ef4; --header_tab_inactive_text: #76787a; --header_text_secondary: hsla(0, 0%, 100%, 0.6); --header_tint_alternate: #e1e3e6; --icon_medium: #909499; --icon_name: #aaaeb3; --icon_outline_medium: #aaaeb3; --icon_outline_secondary: #909499; --icon_secondary: #76787a; --icon_secondary_alpha: hsla(0, 0%, 100%, 0.36); --icon_tertiary: #5d5f61; --im_bubble_button_outgoing_background: hsla(0, 0%, 100%, 0.2); --im_bubble_incoming: #2c2d2e; --im_bubble_incoming_alternate: #2c2d2e; --im_bubble_incoming_alternate_highlighted: #5d5f61; --im_bubble_incoming_highlighted: #5d5f61; --im_bubble_outgoing: #454647; --im_bubble_outgoing_alternate: #454647; --im_bubble_outgoing_alternate_highlighted: #76787a; --im_bubble_outgoing_highlighted: #5d5f61; --im_bubble_wallpaper_button_background: #454647; --im_bubble_wallpaper_button_background_highlighted: #76787a; --im_bubble_wallpaper_incoming: #2c2d2e; --im_bubble_wallpaper_incoming_highlighted: #5d5f61; --im_bubble_wallpaper_outgoing: #454647; --im_bubble_wallpaper_outgoing_highlighted: #5d5f61; --im_service_message_text: #76787a; --im_text_name: #529ef4; --im_toolbar_separator: #aaaeb3; --im_toolbar_voice_msg_background: #454647; --input_background: #2c2d2e; --input_border: #2c2d2e; --landing_background: #19191a; --landing_field_background: #232324; --landing_field_placeholder: #aaaeb3; --landing_login_button_foreground: #19191a; --landing_primary_button_foreground: #19191a; --landing_secondary_button_background: hsla(0, 0%, 100%, 0.15); --landing_snippet_border: hsla(0, 0%, 100%, 0.15); --landing_text_secondary: #76787a; --link_alternate: #fff; --loader_background: #19191a; --loader_track_fill: #454647; --modal_card_background: #232324; --overlay_status_background: #19191a; --overlay_status_icon: #ebedf0; --panel_tab_active_background: #454647; --placeholder_icon_background_opaque: #232324; --placeholder_icon_foreground_primary: #909499; --placeholder_icon_foreground_secondary: #5d5f61; --search_bar_background: #19191a; --search_bar_field_background: #363738; --search_bar_field_tint: #aaaeb3; --search_bar_segmented_control_tint: #909499; --secondary_overlay_badge: hsla(0, 0%, 100%, 0.15); --segmented_control_bar_background: #19191a; --segmented_control_tint: #76787a; --selection_off_icon: #5d5f61; --separator_alpha: hsla(0, 0%, 100%, 0.12); --separator_alternate: #232324; --separator_common: #363738; --skeleton_foreground_from: #232324; --skeleton_foreground_to: #2c2d2e; --skeleton_shimmer_from: #19191a; --skeleton_shimmer_to: #19191a; --snippet_background: #232324; --snippet_border: hsla(0, 0%, 100%, 0.15); --snippet_icon_tertiary: #5d5f61; --splashscreen_icon: #2c2d2e; --stories_create_button_background_from: #363738; --stories_create_button_background_to: #363738; --stories_create_button_foreground: #c4c8cc; --stories_create_button_icon_background: #454647; --stories_skeleton_loader_background: #454647; --switch_ios_off_border: #2c2d2e; --tabbar_background: #2c2d2e; --tabbar_inactive_icon: #76787a; --tabbar_tablet_active_icon: #529ef4; --tabbar_tablet_background: #232324; --tabbar_tablet_inactive_icon: #76787a; --tabbar_tablet_text_secondary: #76787a; --text_action_counter: #aaaeb3; --text_link: #529ef4; --text_link_highlighted_background: #529ef4; --text_muted: #c4c8cc; --text_placeholder: #aaaeb3; --text_secondary: #76787a; --text_subhead: #909499; --text_tertiary: #5d5f61; --toolbar_attach_background_from: #76787a; --toolbar_attach_background_to: #5d5f61; --vk_connect_button_primary_foreground: #19191a; --vk_connect_button_secondary_background: #454647; } .vkuispace_gray, .vkuivkcom_dark, [scheme="space_gray"], [scheme="vkcom_dark"], body[scheme="space_gray"], body[scheme="vkcom_dark"] { --accent_alternate: #fff; --action_sheet_action_foreground: #fff; --attach_picker_tab_active_background: #e1e3e6; --attach_picker_tab_active_text: #e1e3e6; --attach_picker_tab_inactive_icon: #e1e3e6; --background_highlighted: hsla(0, 0%, 100%, 0.08); --button_muted_foreground: #e1e3e6; --button_outline_border: #e1e3e6; --button_outline_foreground: #e1e3e6; --button_primary_background: #e1e3e6; --button_secondary_destructive_foreground: #ff5c5c; --button_secondary_foreground: #e1e3e6; --button_tertiary_foreground: #e1e3e6; --cell_button_foreground: #e1e3e6; --control_foreground: #e1e3e6; --counter_primary_background: #fff; --destructive: #ff5c5c; --dynamic_purple: #937ff5; --dynamic_raspberry_pink: #f060c0; --dynamic_violet: #a393f5; --float_button_border: rgba(0, 0, 0, 0.12); --header_alternate_tab_active_indicator: #e1e3e6; --header_alternate_tab_active_text: #e1e3e6; --header_tab_active_text: #e1e3e6; --header_text: #e1e3e6; --header_text_alternate: #e1e3e6; --header_tint: #e1e3e6; --icon_alpha_placeholder: #e1e3e6; --icon_medium_alpha: hsla(0, 0%, 100%, 0.48); --icon_tertiary_alpha: hsla(0, 0%, 100%, 0.24); --im_attach_tint: #fff; --im_bubble_border_alternate: transparent; --im_bubble_border_alternate_highlighted: transparent; --im_bubble_button_background: hsla(0, 0%, 100%, 0.16); --im_bubble_button_background_highlighted: hsla(0, 0%, 100%, 0.24); --im_bubble_button_foreground: #e1e3e6; --im_bubble_gift_background: #857250; --im_bubble_gift_background_highlighted: #ab9871; --im_bubble_gift_text: #fff; --im_bubble_gift_text_secondary: #e3d3ac; --im_bubble_incoming_expiring: #262b4d; --im_bubble_incoming_expiring_highlighted: #404980; --im_bubble_outgoing_expiring: #404980; --im_bubble_outgoing_expiring_highlighted: #5965b3; --im_bubble_wallpaper_button_foreground: #e1e3e6; --im_forward_line_tint: hsla(0, 0%, 100%, 0.24); --im_reply_separator: #fff; --image_border: hsla(0, 0%, 100%, 0.08); --landing_login_button_background: #e1e3e6; --landing_primary_button_background: #e1e3e6; --landing_secondary_button_foreground: #fff; --landing_tertiary_button_foreground: #fff; --landing_text_primary: #e1e3e6; --landing_text_title: #fff; --like_text_tint: #ff5c5c; --loader_track_value_fill: #fff; --modal_card_border: hsla(0, 0%, 100%, 0.12); --modal_card_header_close: #fff; --music_playback_icon: #fff; --overlay_status_foreground: #e1e3e6; --panel_tab_active_text: #e1e3e6; --placeholder_icon_background: hsla(0, 0%, 100%, 0.08); --placeholder_icon_tint: #fff; --poll_option_background: #fff; --primary_overlay_badge: hsla(0, 0%, 100%, 0.4); --statusbar_alternate_legacy_background: transparent; --tabbar_active_icon: #fff; --tabbar_tablet_text_primary: #e1e3e6; --text_name: #e1e3e6; --text_primary: #e1e3e6; --vk_connect_button_primary_background: #e1e3e6; --vk_connect_button_secondary_foreground: #e1e3e6; --writebar_icon: #e1e3e6; } .vkuivkcom_light, [scheme="vkcom_light"], body[scheme="vkcom_light"] { --accent: #447bba; --action_sheet_action_foreground: #447bba; --attach_picker_tab_active_background: #447bba; --attach_picker_tab_active_text: #447bba; --attach_picker_tab_inactive_background: #f5f5f5; --background_highlighted: rgba(174, 183, 194, 0.16); --background_hover: rgba(174, 183, 194, 0.12); --background_keyboard: #dce1e6; --background_light: #fafbfc; --background_page: #edeef0; --button_bot_shadow: #ccc; --button_muted_background: #e5ebf1; --button_muted_foreground: #346297; --button_outline_border: #346297; --button_outline_foreground: #346297; --button_primary_background: #447bba; --button_secondary_background: #e5ebf1; --button_secondary_background_highlighted: #dae2ea; --button_secondary_destructive_background: rgba(230, 70, 70, 0.16); --button_secondary_destructive_background_highlighted: rgba( 230, 70, 70, 0.12 ); --button_secondary_destructive_foreground_highlighted: rgba( 230, 70, 70, 0.12 ); --button_secondary_foreground: #346297; --button_secondary_foreground_highlighted: #224b7a; --button_tertiary_foreground: #346297; --cell_button_foreground: #346297; --content_negative_background: #faebeb; --content_positive_background: #def0d3; --content_tint_background: #f0f2f5; --content_tint_foreground: #828282; --content_warning_background: #faefd2; --control_background: #edeef0; --control_foreground: #447bba; --control_tint_muted: #828282; --counter_primary_background: #447bba; --counter_secondary_background: #99a2ad; --dynamic_blue: #5181b8; --dynamic_green: #1b7a1b; --feed_recommended_friend_promo_background: #447bba; --field_background: #f7f8fa; --field_border: #dce1e6; --float_button_background: #f7f8fa; --float_button_background_highlighted: #edeef0; --float_button_border: rgba(0, 0, 0, 0.08); --header_alternate_tab_active_indicator: #447bba; --header_search_field_background: #edeef0; --header_tint: #aeb7c2; --header_tint_alternate: #447bba; --icon_medium: #6f7985; --icon_name: #8fadc8; --icon_tertiary: #aeb7c2; --im_attach_tint: #447bba; --im_bubble_border_alternate: #dce1e6; --im_bubble_border_alternate_highlighted: #ccc; --im_bubble_button_background: #f7f8fa; --im_bubble_button_background_highlighted: #ccc; --im_bubble_button_outgoing_background: hsla(0, 0%, 100%, 0.72); --im_bubble_incoming: #edeef0; --im_bubble_incoming_alternate_highlighted: #f7f8fa; --im_bubble_incoming_highlighted: #d3d9de; --im_bubble_outgoing_alternate_highlighted: #f0f2f5; --im_bubble_wallpaper_button_background: #f0f2f5; --im_bubble_wallpaper_button_background_highlighted: #e7e8ec; --im_bubble_wallpaper_incoming_highlighted: #edeef0; --im_forward_line_tint: rgba(0, 20, 51, 0.12); --im_reply_separator: #2a5885; --im_text_name: #2a5885; --input_background: #fff; --input_border: #d3d9de; --landing_field_background: #f7f8fa; --landing_login_button_background: #447bba; --landing_primary_button_background: #447bba; --landing_secondary_button_foreground: #447bba; --landing_snippet_border: rgba(0, 0, 0, 0.12); --landing_tertiary_button_foreground: #447bba; --landing_text_title: #447bba; --link_alternate: #2a5885; --loader_background: #edeef0; --loader_tint: #c5d0db; --loader_track_fill: #d3d9de; --loader_track_value_fill: #447bba; --overlay_status_background: #edeef0; --overlay_status_foreground: #6f7985; --panel_tab_active_background: #edeef0; --panel_tab_active_text: #4e5966; --panel_tab_inactive_text: #6f7985; --placeholder_icon_background_opaque: #f0f2f5; --placeholder_icon_tint: #1d3a5c; --poll_option_background: #447bba; --primary_overlay_badge: rgba(0, 0, 0, 0.56); --search_bar_background: transparent; --search_bar_field_background: #edeef0; --selection_off_icon: #c5d0db; --separator_alternate: #e7e8ec; --separator_common: #dce1e6; --skeleton_foreground_from: #f0f2f5; --skeleton_foreground_to: #e7e8ec; --skeleton_shimmer_to: hsla(0, 0%, 100%, 0); --snippet_border: rgba(0, 0, 0, 0.12); --snippet_icon_tertiary: #aeb7c2; --splashscreen_icon: #dce1e6; --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0.24); --stories_create_button_background_from: #f0f2f5; --stories_create_button_background_to: #dce1e6; --stories_create_button_foreground: #6f7985; --stories_skeleton_loader_background: #ccc; --switch_ios_off_border: #dce1e6; --tabbar_active_icon: #447bba; --tabbar_background: #f7f8fa; --tabbar_tablet_active_icon: #447bba; --tabbar_tablet_background: #f7f8fa; --tabbar_tablet_text_secondary: #818c99; --text_link: #2a5885; --text_muted: #333; --text_name: #2a5885; --text_subhead: #626d7a; --toolbar_attach_background_from: #dce1e6; --toolbar_attach_background_to: #aeb7c2; --vk_connect_button_primary_background: #222; --vk_connect_button_secondary_background: #f5f5f5; --vk_connect_button_secondary_foreground: #222; --writebar_icon: #818c99; } .vkuivkcom_dark, .vkuivkcom_light, [scheme="vkcom_dark"], [scheme="vkcom_light"], body[scheme="vkcom_dark"], body[scheme="vkcom_light"] { --background_text_highlighted: rgba(81, 129, 184, 0.2); --dynamic_gray: #aeb7c2; --header_tab_active_indicator: #397dcc; --media_overlay_button_foreground: #333; } .vkuivkcom_dark, [scheme="vkcom_dark"], body[scheme="vkcom_dark"] { --accent: #71aaeb; --action_sheet_separator: hsla(0, 0%, 100%, 0.16); --activity_indicator_tint: #656565; --attach_picker_tab_active_icon: #222; --attach_picker_tab_inactive_background: #333; --attach_picker_tab_inactive_text: #828282; --background_content: #222; --background_hover: hsla(0, 0%, 100%, 0.08); --background_keyboard: #333; --background_light: #292929; --background_page: #141414; --background_suggestions: #333; --button_bot_shadow: #222; --button_muted_background: #333; --button_primary_foreground: #222; --button_secondary_background: #424242; --button_secondary_background_highlighted: #555; --button_secondary_destructive_background: #555; --button_secondary_destructive_background_highlighted: rgba(85, 85, 85, 0.6); --button_secondary_destructive_foreground_highlighted: rgba( 230, 70, 70, 0.16 ); --button_secondary_foreground_highlighted: #e1e3e6; --content_negative_background: rgba(230, 70, 70, 0.16); --content_placeholder_icon: #b2b2b2; --content_placeholder_text: #b2b2b2; --content_positive_background: rgba(75, 179, 75, 0.16); --content_tint_background: #333; --content_tint_foreground: #939393; --content_warning_background: rgba(255, 202, 99, 0.16); --control_background: #555; --control_background_secondary: #828282; --control_tint: #222; --control_tint_muted: #939393; --counter_primary_text: #222; --counter_secondary_background: #828282; --counter_secondary_text: #222; --dynamic_blue: #397dcc; --feed_recommended_friend_promo_background: #6f7985; --field_background: #292929; --field_border: #424242; --field_error_background: rgba(230, 70, 70, 0.16); --field_text_placeholder: #828282; --float_button_background: #555; --float_button_background_highlighted: #656565; --float_button_foreground: #b2b2b2; --header_alternate_background: #333; --header_alternate_tab_inactive_text: #828282; --header_background: #222; --header_background_before_blur: #0a0a0a; --header_background_before_blur_alternate: #0a0a0a; --header_search_field_background: #424242; --header_search_field_tint: #b2b2b2; --header_tab_active_background: #656565; --header_tab_inactive_text: #828282; --header_text_secondary: hsla(0, 0%, 100%, 0.64); --header_tint_alternate: #fff; --icon_medium: #939393; --icon_name: #b2b2b2; --icon_outline_medium: #b2b2b2; --icon_outline_secondary: #939393; --icon_secondary: #828282; --icon_secondary_alpha: hsla(0, 0%, 100%, 0.4); --icon_tertiary: #656565; --im_bubble_button_outgoing_background: hsla(0, 0%, 100%, 0.24); --im_bubble_incoming: #333; --im_bubble_incoming_alternate: #333; --im_bubble_incoming_alternate_highlighted: #656565; --im_bubble_incoming_highlighted: #656565; --im_bubble_outgoing: #555; --im_bubble_outgoing_alternate: #555; --im_bubble_outgoing_alternate_highlighted: #828282; --im_bubble_outgoing_highlighted: #656565; --im_bubble_wallpaper_button_background: #555; --im_bubble_wallpaper_button_background_highlighted: #828282; --im_bubble_wallpaper_incoming: #333; --im_bubble_wallpaper_incoming_highlighted: #656565; --im_bubble_wallpaper_outgoing: #555; --im_bubble_wallpaper_outgoing_highlighted: #656565; --im_service_message_text: #828282; --im_text_name: #71aaeb; --im_toolbar_separator: #b2b2b2; --im_toolbar_voice_msg_background: #555; --input_background: #424242; --input_border: #555; --landing_background: #222; --landing_field_background: #292929; --landing_field_placeholder: #b2b2b2; --landing_login_button_foreground: #222; --landing_primary_button_foreground: #222; --landing_secondary_button_background: hsla(0, 0%, 100%, 0.16); --landing_snippet_border: hsla(0, 0%, 100%, 0.16); --landing_text_secondary: #828282; --link_alternate: #939393; --loader_background: #555; --loader_tint: #828282; --loader_track_fill: #828282; --modal_card_background: #292929; --overlay_status_background: #222; --overlay_status_icon: #edeef0; --panel_tab_active_background: #555; --panel_tab_inactive_text: #828282; --placeholder_icon_background_opaque: #292929; --placeholder_icon_foreground_primary: #939393; --placeholder_icon_foreground_secondary: #656565; --search_bar_background: #222; --search_bar_field_background: #424242; --search_bar_field_tint: #b2b2b2; --search_bar_segmented_control_tint: #939393; --secondary_overlay_badge: hsla(0, 0%, 100%, 0.16); --segmented_control_bar_background: #222; --segmented_control_tint: #828282; --selection_off_icon: #656565; --separator_alpha: hsla(0, 0%, 100%, 0.16); --separator_alternate: #292929; --separator_common: #424242; --skeleton_foreground_from: #292929; --skeleton_foreground_to: #333; --skeleton_shimmer_from: #222; --skeleton_shimmer_to: transparent; --snippet_background: hsla(0, 0%, 100%, 0.04); --snippet_border: hsla(0, 0%, 100%, 0.16); --snippet_icon_tertiary: #656565; --splashscreen_icon: #333; --stories_create_button_background_from: #424242; --stories_create_button_background_to: #424242; --stories_create_button_foreground: #ccc; --stories_create_button_icon_background: #555; --stories_skeleton_loader_background: #555; --switch_ios_off_border: #333; --tabbar_background: #333; --tabbar_inactive_icon: #828282; --tabbar_tablet_active_icon: #397dcc; --tabbar_tablet_background: #292929; --tabbar_tablet_inactive_icon: #828282; --tabbar_tablet_text_secondary: #828282; --text_action_counter: #b2b2b2; --text_link: #71aaeb; --text_link_highlighted_background: #397dcc; --text_muted: #ccc; --text_placeholder: #b2b2b2; --text_secondary: #828282; --text_subhead: #939393; --text_tertiary: #656565; --toolbar_attach_background_from: #828282; --toolbar_attach_background_to: #656565; --vk_connect_button_primary_foreground: #222; --vk_connect_button_secondary_background: #555; } .vkui--vkBase--light, :root { --vkui--theme_name: "vkBase"; } .vkui--vkBase--dark, .vkui--vkBase--light, :root { --vkui--theme_name_base: "vkBase"; --vkui--size_switch_height--regular: 14px; --vkui--size_switch_height--compact: 12px; --vkui--size_switch_width--regular: 34px; --vkui--size_switch_width--compact: 32px; --vkui--size_switch_pin--regular: 20px; --vkui--size_switch_pin--compact: 18px; --vkui--size_panel_header_height--regular: 56px; } .vkui--vkBase--dark, .vkui--vkBase--light, .vkui--vkCom--dark, .vkui--vkCom--light, .vkui--vkIOS--dark, .vkui--vkIOS--light, :root { --vkui--gradient_black: transparent 0%, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100%; --vkui--gradient_white: hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.036) 13%, hsla(0, 0%, 100%, 0.15) 27%, hsla(0, 0%, 100%, 0.79) 68%, hsla(0, 0%, 100%, 0.95) 84%, #fff 100%; --vkui--elevation1: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06); --vkui--elevation1_invert_y: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06); --vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06); --vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08); --vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16); --vkui--font_family_accent: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_family_base: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_weight_accent1: 600; --vkui--font_weight_accent2: 500; --vkui--font_weight_accent3: 400; --vkui--font_weight_base1: 600; --vkui--font_weight_base2: 500; --vkui--font_weight_base3: 400; --vkui--font_title1--font_size--regular: 24px; --vkui--font_title1--line_height--regular: 28px; --vkui--font_title1--letter_spacing--regular: -0.48px; --vkui--font_title1--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_title1--font_weight--regular: 600; --vkui--font_title2--font_size--regular: 20px; --vkui--font_title2--line_height--regular: 24px; --vkui--font_title2--letter_spacing--regular: -0.4px; --vkui--font_title2--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_title2--font_weight--regular: 600; --vkui--font_title3--font_size--regular: 17px; --vkui--font_title3--line_height--regular: 22px; --vkui--font_title3--letter_spacing--regular: -0.22px; --vkui--font_title3--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_title3--font_weight--regular: 600; --vkui--font_headline1--font_size--regular: 16px; --vkui--font_headline1--line_height--regular: 20px; --vkui--font_headline1--letter_spacing--regular: -0.16px; --vkui--font_headline1--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_headline1--font_weight--regular: 500; --vkui--font_headline1--font_size--compact: 15px; --vkui--font_headline1--line_height--compact: 20px; --vkui--font_headline1--letter_spacing--compact: -0.1px; --vkui--font_headline2--font_size--regular: 15px; --vkui--font_headline2--line_height--regular: 20px; --vkui--font_headline2--letter_spacing--regular: -0.1px; --vkui--font_headline2--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_headline2--font_weight--regular: 500; --vkui--font_headline2--font_size--compact: 14px; --vkui--font_headline2--line_height--compact: 20px; --vkui--font_headline2--letter_spacing--compact: -0.06px; --vkui--font_text--font_size--regular: 16px; --vkui--font_text--line_height--regular: 20px; --vkui--font_text--letter_spacing--regular: -0.16px; --vkui--font_text--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_text--font_weight--regular: 400; --vkui--font_text--font_size--compact: 15px; --vkui--font_text--line_height--compact: 20px; --vkui--font_text--letter_spacing--compact: -0.1px; --vkui--font_paragraph--font_size--regular: 15px; --vkui--font_paragraph--line_height--regular: 20px; --vkui--font_paragraph--letter_spacing--regular: -0.1px; --vkui--font_paragraph--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_paragraph--font_weight--regular: 400; --vkui--font_subhead--font_size--regular: 14px; --vkui--font_subhead--line_height--regular: 18px; --vkui--font_subhead--letter_spacing--regular: -0.06px; --vkui--font_subhead--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_subhead--font_weight--regular: 400; --vkui--font_subhead--font_size--compact: 13px; --vkui--font_subhead--line_height--compact: 16px; --vkui--font_subhead--letter_spacing--compact: 0px; --vkui--font_footnote--font_size--regular: 13px; --vkui--font_footnote--line_height--regular: 16px; --vkui--font_footnote--letter_spacing--regular: 0px; --vkui--font_footnote--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_footnote--font_weight--regular: 400; --vkui--font_footnote_caps--font_size--regular: 13px; --vkui--font_footnote_caps--line_height--regular: 16px; --vkui--font_footnote_caps--letter_spacing--regular: 0.3px; --vkui--font_footnote_caps--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_footnote_caps--font_weight--regular: 400; --vkui--font_footnote_caps--text_transform--regular: uppercase; --vkui--font_caption1--font_size--regular: 12px; --vkui--font_caption1--line_height--regular: 14px; --vkui--font_caption1--letter_spacing--regular: 0.06px; --vkui--font_caption1--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_caption1--font_weight--regular: 400; --vkui--font_caption1_caps--font_size--regular: 12px; --vkui--font_caption1_caps--line_height--regular: 14px; --vkui--font_caption1_caps--letter_spacing--regular: 0.2px; --vkui--font_caption1_caps--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_caption1_caps--font_weight--regular: 600; --vkui--font_caption1_caps--text_transform--regular: uppercase; --vkui--font_caption2--font_size--regular: 11px; --vkui--font_caption2--line_height--regular: 14px; --vkui--font_caption2--letter_spacing--regular: 0.11px; --vkui--font_caption2--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_caption2--font_weight--regular: 400; --vkui--font_caption2_caps--font_size--regular: 11px; --vkui--font_caption2_caps--line_height--regular: 14px; --vkui--font_caption2_caps--letter_spacing--regular: 0.3px; --vkui--font_caption2_caps--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_caption2_caps--font_weight--regular: 600; --vkui--font_caption2_caps--text_transform--regular: uppercase; --vkui--font_caption3--font_size--regular: 9px; --vkui--font_caption3--line_height--regular: 12px; --vkui--font_caption3--letter_spacing--regular: 0.18px; --vkui--font_caption3--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_caption3--font_weight--regular: 400; --vkui--font_caption3_caps--font_size--regular: 9px; --vkui--font_caption3_caps--line_height--regular: 12px; --vkui--font_caption3_caps--letter_spacing--regular: 0.3px; --vkui--font_caption3_caps--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_caption3_caps--font_weight--regular: 600; --vkui--font_caption3_caps--text_transform--regular: uppercase; --vkui--size_select_icon_padding--regular: 6px; --vkui--size_select_icon_padding--compact: 7px; --vkui--size_popup_base_padding--regular: 32px; --vkui--size_popup_base_padding--compact: 20px; --vkui--size_popup_header_padding--regular: 24px; --vkui--size_popup_header_padding--compact: 16px; --vkui--size_label_horizontal_margin--regular: 16px; --vkui--size_check_border_radius--regular: 4px; --vkui--size_border_radius_paper--regular: 12px; --vkui--size_border_radius_promo--regular: 20px; --vkui--size_field_height--regular: 44px; --vkui--size_field_height--compact: 36px; --vkui--size_search_height--regular: 36px; --vkui--size_search_height--compact: 32px; --vkui--size_button_large_height--regular: 44px; --vkui--size_button_large_height--compact: 36px; --vkui--size_button_medium_height--regular: 36px; --vkui--size_button_medium_height--compact: 32px; --vkui--size_button_small_height--regular: 30px; --vkui--size_button_small_height--compact: 28px; --vkui--size_checkbox--regular: 16px; --vkui--size_arrow--regular: 8px; --vkui--size_arrow_promo--regular: 40px; --vkui--size_popup_small--regular: 420px; --vkui--size_popup_medium--regular: 680px; --vkui--size_popup_large--regular: 880px; --vkui--size_field_horizontal_padding--regular: 12px; --vkui--size_button_padding_horizontal--regular: 12px; --vkui--size_arrow_padding--regular: 12px; --vkui--size_tooltip_margin--regular: 8px; --vkui--size_icon_u_i--regular: 16px; --vkui--size_avatar_x_s--regular: 24px; --vkui--size_avatar_s--regular: 32px; --vkui--size_avatar_m--regular: 48px; --vkui--size_avatar_l--regular: 96px; --vkui--size_avatar_x_l--regular: 128px; --vkui--size_badge_x_s--regular: 12px; --vkui--size_badge_s--regular: 16px; --vkui--size_badge_m--regular: 24px; --vkui--size_badge_l--regular: 44px; --vkui--size_badge_x_l--regular: 56px; --vkui--size_cardgrid_padding--regular: 8px; --vkui--size_cardgrid_padding_vertical--regular: 8px; --vkui--size_base_padding_vertical--regular: 12px; --vkui--size_button_group_gap_space--regular: 1px; --vkui--size_button_group_gap_small--regular: 8px; --vkui--size_button_group_gap_medium--regular: 12px; --vkui--size_option_hierarchy--regular: 32px; --vkui--size_button_base_small_padding_horizontal--regular: 16px; --vkui--size_button_base_medium_padding_horizontal--regular: 16px; --vkui--size_button_base_large_padding_horizontal--regular: 20px; --vkui--size_button_base_small_padding_horizontal_icon--regular: 12px; --vkui--size_button_base_medium_padding_horizontal_icon--regular: 12px; --vkui--size_button_base_large_padding_horizontal_icon--regular: 16px; --vkui--size_button_tertiary_small_padding_horizontal--regular: 12px; --vkui--size_button_tertiary_medium_padding_horizontal--regular: 12px; --vkui--size_button_tertiary_large_padding_horizontal--regular: 16px; --vkui--size_button_tertiary_small_padding_horizontal_icon--regular: 8px; --vkui--size_button_tertiary_medium_padding_horizontal_icon--regular: 8px; --vkui--size_button_tertiary_large_padding_horizontal_icon--regular: 12px; --vkui--size_button_minimum_width--regular: 80px; --vkui--size_form_item_padding_vertical--regular: 12px; --vkui--size_split_col_padding_horizontal--regular: 16px; --vkui--size_subnavigation_bar_gap--regular: 8px; --vkui--size_subnavigation_bar_padding_vertical--regular: 12px; --vkui--animation_duration_l: 0.4s; --vkui--animation_duration_m: 0.2s; --vkui--animation_duration_s: 0.1s; --vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1); --vkui--opacity_disable: 0.4; --vkui--opacity_disable_accessibility: 0.64; --vkui--z_index_modal: 99; --vkui--z_index_popout: 100; --vkui--font_headline--font_size--regular: 16px; --vkui--font_headline--line_height--regular: 20px; --vkui--font_headline--letter_spacing--regular: -0.16px; --vkui--font_headline--font_family--regular: "VK Sans Text", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif; --vkui--font_headline--font_weight--regular: 500; --vkui--font_headline--font_size--compact: 15px; --vkui--font_headline--line_height--compact: 20px; --vkui--font_headline--letter_spacing--compact: -0.1px; --vkui--color_background_accent_tint: #5a9eff; --vkui--color_background_contrast: #fff; --vkui--color_background_contrast_secondary_alpha: hsla(0, 0%, 100%, 0.2); --vkui--color_background_contrast_secondary_alpha--hover: hsla( 0, 0%, 100%, 0.24 ); --vkui--color_background_contrast_secondary_alpha--active: hsla( 0, 0%, 100%, 0.28 ); --vkui--color_background_positive: #4bb34b; --vkui--color_background_positive_tint: #e8f9e8; --vkui--color_text_contrast: #fff; --vkui--color_text_positive: #4bb34b; --vkui--color_text_link_visited: #4986cc; --vkui--color_icon_contrast_secondary: #f2f3f5; --vkui--color_icon_positive: #4bb34b; --vkui--color_stroke_positive: #4bb34b; --vkui--color_stroke_contrast: #fff; --vkui--color_accent_red: #ff3347; --vkui--color_accent_orange: #ffa000; --vkui--color_accent_secondary: #3f8ae0; --vkui--color_overlay_primary: rgba(0, 0, 0, 0.4); --vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.44); --vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.48); --vkui--color_avatar_overlay: rgba(0, 0, 0, 0.6); --vkui--color_avatar_overlay--hover: rgba(0, 0, 0, 0.64); --vkui--color_avatar_overlay--active: rgba(0, 0, 0, 0.68); --vkui--color_avatar_overlay_inverse_alpha: hsla(0, 0%, 100%, 0.85); --vkui--color_avatar_overlay_inverse_alpha--hover: hsla(0, 0%, 100%, 0.89); --vkui--color_avatar_overlay_inverse_alpha--active: hsla(0, 0%, 100%, 0.93); --vkui--color_transparent: transparent; } .vkui--vkBase--light, .vkui--vkCom--light, .vkui--vkIOS--light, :root { --vkui--gradient_tint: hsla(0, 0%, 98%, 0) 0%, hsla(0, 0%, 98%, 0.036) 13%, hsla(0, 0%, 98%, 0.15) 27%, hsla(0, 0%, 98%, 0.79) 68%, hsla(0, 0%, 98%, 0.95) 84%, #f9f9f9 100%; --vkui--colors_scheme: light; --vkui--color_background_accent_tint--hover: #5698f7; --vkui--color_background_accent_tint--active: #5393ef; --vkui--color_background_content: #fff; --vkui--color_background_content--hover: #f5f5f7; --vkui--color_background_content--active: #ebecef; --vkui--color_background_secondary_alpha: rgba(0, 0, 0, 0.04); --vkui--color_background_secondary_alpha--hover: rgba(0, 0, 0, 0.08); --vkui--color_background_secondary_alpha--active: rgba(0, 0, 0, 0.12); --vkui--color_background_tertiary_alpha: rgba(0, 0, 0, 0.03); --vkui--color_background_tertiary_alpha--hover: rgba(0, 0, 0, 0.07); --vkui--color_background_tertiary_alpha--active: rgba(0, 0, 0, 0.11); --vkui--color_background_contrast--hover: #f5f5f7; --vkui--color_background_contrast--active: #ebecef; --vkui--color_background_modal: #fff; --vkui--color_background_modal--hover: #f5f5f7; --vkui--color_background_modal--active: #ebecef; --vkui--color_background_warning: #fff2d6; --vkui--color_background_warning--hover: #f5e9d0; --vkui--color_background_warning--active: #ebe0ca; --vkui--color_background_positive--hover: #48ac4a; --vkui--color_background_positive--active: #45a64a; --vkui--color_background_negative: #e64646; --vkui--color_background_negative--hover: #dd4446; --vkui--color_background_negative--active: #d44245; --vkui--color_background_negative_tint: #faebeb; --vkui--color_background_negative_tint--hover: #f0e2e4; --vkui--color_background_negative_tint--active: #e6d9dd; --vkui--color_background_positive_tint--hover: #dff0e1; --vkui--color_background_positive_tint--active: #d5e6da; --vkui--color_header_background: #fff; --vkui--color_header_background--hover: #f5f5f7; --vkui--color_header_background--active: #ebecef; --vkui--color_text_primary: #000; --vkui--color_text_primary--hover: #000102; --vkui--color_text_primary--active: #000105; --vkui--color_text_secondary: #818c99; --vkui--color_text_secondary--hover: #7c8795; --vkui--color_text_secondary--active: #778292; --vkui--color_text_tertiary: #99a2ad; --vkui--color_text_tertiary--hover: #939ca9; --vkui--color_text_tertiary--active: #8d96a4; --vkui--color_text_contrast--hover: #f5f5f7; --vkui--color_text_contrast--active: #ebecef; --vkui--color_text_contrast_themed: #fff; --vkui--color_text_contrast_themed--hover: #f5f5f7; --vkui--color_text_contrast_themed--active: #ebecef; --vkui--color_text_positive--hover: #48ac4a; --vkui--color_text_positive--active: #45a64a; --vkui--color_text_negative: #e64646; --vkui--color_text_negative--hover: #dd4446; --vkui--color_text_negative--active: #d44245; --vkui--color_text_link_visited--hover: #4681c6; --vkui--color_text_link_visited--active: #437dc1; --vkui--color_icon_primary: #2c2d2e; --vkui--color_icon_primary--hover: #2a2c2f; --vkui--color_icon_primary--active: #282b2f; --vkui--color_icon_medium_alpha: rgba(0, 0, 0, 0.48); --vkui--color_icon_medium_alpha--hover: rgba(0, 0, 0, 0.52); --vkui--color_icon_medium_alpha--active: rgba(0, 0, 0, 0.56); --vkui--color_icon_secondary: #99a2ad; --vkui--color_icon_secondary--hover: #939ca9; --vkui--color_icon_secondary--active: #8d96a4; --vkui--color_icon_secondary_alpha: rgba(0, 0, 0, 0.36); --vkui--color_icon_secondary_alpha--hover: rgba(0, 0, 0, 0.4); --vkui--color_icon_secondary_alpha--active: rgba(0, 0, 0, 0.44); --vkui--color_icon_tertiary_alpha: rgba(0, 0, 0, 0.24); --vkui--color_icon_tertiary_alpha--hover: rgba(0, 0, 0, 0.28); --vkui--color_icon_tertiary_alpha--active: rgba(0, 0, 0, 0.32); --vkui--color_icon_contrast--hover: #f5f5f7; --vkui--color_icon_contrast--active: #ebecef; --vkui--color_icon_contrast_themed: #fff; --vkui--color_icon_contrast_themed--hover: #f5f5f7; --vkui--color_icon_contrast_themed--active: #ebecef; --vkui--color_icon_contrast_secondary--hover: #e8eaee; --vkui--color_icon_contrast_secondary--active: #dfe1e6; --vkui--color_icon_positive--hover: #48ac4a; --vkui--color_icon_positive--active: #45a64a; --vkui--color_icon_negative: #e64646; --vkui--color_icon_negative--hover: #dd4446; --vkui--color_icon_negative--active: #d44245; --vkui--color_separator_primary: #d7d8d9; --vkui--color_separator_primary--hover: #ced0d3; --vkui--color_separator_primary--active: #c6c8cd; --vkui--color_separator_primary2x: #cbcccd; --vkui--color_separator_primary2x--hover: #c3c4c7; --vkui--color_separator_primary2x--active: #bbbdc1; --vkui--color_separator_primary3x: #bebfc1; --vkui--color_separator_primary3x--hover: #b6b8bc; --vkui--color_separator_primary3x--active: #afb1b6; --vkui--color_separator_primary_alpha: rgba(0, 0, 0, 0.12); --vkui--color_separator_primary_alpha--hover: rgba(0, 0, 0, 0.16); --vkui--color_separator_primary_alpha--active: rgba(0, 0, 0, 0.2); --vkui--color_stroke_positive--hover: #48ac4a; --vkui--color_stroke_positive--active: #45a64a; --vkui--color_stroke_negative: #e64646; --vkui--color_stroke_negative--hover: #dd4446; --vkui--color_stroke_negative--active: #d44245; --vkui--color_stroke_contrast--hover: #f5f5f7; --vkui--color_stroke_contrast--active: #ebecef; --vkui--color_image_border_alpha: rgba(0, 0, 0, 0.08); --vkui--color_image_border_alpha--hover: rgba(0, 0, 0, 0.12); --vkui--color_image_border_alpha--active: rgba(0, 0, 0, 0.16); --vkui--color_field_border_alpha: rgba(0, 0, 0, 0.12); --vkui--color_field_border_alpha--hover: rgba(0, 0, 0, 0.24); --vkui--color_field_border_alpha--active: rgba(0, 0, 0, 0.36); --vkui--color_accent_red--hover: #f53247; --vkui--color_accent_red--active: #eb3046; --vkui--color_accent_orange--hover: #f59a02; --vkui--color_accent_orange--active: #eb9405; --vkui--color_accent_purple--hover: #6e59df; --vkui--color_accent_purple--active: #6a56d8; --vkui--color_accent_violet--hover: #742dbb; --vkui--color_accent_violet--active: #6f2cb6; --vkui--color_accent_secondary--hover: #3c85d9; --vkui--color_accent_secondary--active: #3a80d3; --vkui--color_action_sheet_text: #3f8ae0; --vkui--color_action_sheet_text--hover: #3c85d9; --vkui--color_action_sheet_text--active: #3a80d3; --vkui--color_image_placeholder: #f2f3f5; --vkui--color_image_placeholder--hover: #e8eaee; --vkui--color_image_placeholder--active: #dfe1e6; --vkui--color_image_placeholder_alpha: rgba(0, 28, 61, 0.08); --vkui--color_image_placeholder_alpha--hover: rgba(0, 28, 61, 0.12); --vkui--color_image_placeholder_alpha--active: rgba(0, 28, 61, 0.16); --vkui--color_write_bar_input_border_alpha: rgba(0, 0, 0, 0.08); --vkui--color_write_bar_input_border_alpha--hover: rgba(0, 0, 0, 0.12); --vkui--color_write_bar_input_border_alpha--active: rgba(0, 0, 0, 0.16); --vkui--color_segmented_control: #fff; --vkui--color_segmented_control--hover: #f5f5f7; --vkui--color_segmented_control--active: #ebecef; --vkui--color_transparent--hover: rgba(0, 16, 61, 0.04); --vkui--color_transparent--active: rgba(0, 16, 61, 0.08); } .vkui--vkBase--dark, .vkui--vkBase--light, .vkui--vkCom--dark, .vkui--vkCom--light, :root { --vkui--size_border_radius--regular: 8px; --vkui--size_card_border_radius--regular: 8px; --vkui--size_base_padding_horizontal--regular: 16px; --vkui--animation_easing_platform: cubic-bezier(0.4, 0, 0.2, 1); } .vkui--vkBase--light, .vkui--vkIOS--light, :root { --vkui--color_background_accent: #2688eb; --vkui--color_background_accent--hover: #2483e4; --vkui--color_background_accent--active: #237edd; --vkui--color_background_accent_themed: #2688eb; --vkui--color_background_accent_themed--hover: #2483e4; --vkui--color_background_accent_themed--active: #237edd; --vkui--color_background_accent_alternative: #2688eb; --vkui--color_background_accent_alternative--hover: #2483e4; --vkui--color_background_accent_alternative--active: #237edd; --vkui--color_background: #ebedf0; --vkui--color_background--hover: #e2e4e9; --vkui--color_background--active: #d8dbe2; --vkui--color_background_secondary: #f5f5f5; --vkui--color_background_secondary--hover: #ebecee; --vkui--color_background_secondary--active: #e1e3e6; --vkui--color_background_tertiary: #f9f9f9; --vkui--color_background_tertiary--hover: #eff0f1; --vkui--color_background_tertiary--active: #e5e6ea; --vkui--color_background_contrast_inverse--hover: #2b2c2f; --vkui--color_background_contrast_inverse--active: #292b2f; --vkui--color_background_modal_inverse: #2d2d2e; --vkui--color_background_modal_inverse--hover: #2b2c2f; --vkui--color_background_modal_inverse--active: #292b2f; --vkui--color_field_background: #f2f3f5; --vkui--color_field_background--hover: #e8eaee; --vkui--color_field_background--active: #dfe1e6; --vkui--color_text_accent: #2688eb; --vkui--color_text_accent--hover: #2483e4; --vkui--color_text_accent--active: #237edd; --vkui--color_text_accent_themed: #2688eb; --vkui--color_text_accent_themed--hover: #2483e4; --vkui--color_text_accent_themed--active: #237edd; --vkui--color_text_primary_invariably--hover: #000102; --vkui--color_text_primary_invariably--active: #000105; --vkui--color_text_subhead: #6d7885; --vkui--color_text_subhead--hover: #697482; --vkui--color_text_subhead--active: #64707f; --vkui--color_text_link: #2d81e0; --vkui--color_text_link--hover: #2b7cd9; --vkui--color_text_link--active: #2978d3; --vkui--color_text_link_themed: #2d81e0; --vkui--color_text_link_themed--hover: #2b7cd9; --vkui--color_text_link_themed--active: #2978d3; --vkui--color_text_muted: #2c2d2e; --vkui--color_text_muted--hover: #2a2c2f; --vkui--color_text_muted--active: #282b2f; --vkui--color_link_contrast--hover: #f5f5f7; --vkui--color_link_contrast--active: #ebecef; --vkui--color_icon_accent: #2688eb; --vkui--color_icon_accent--hover: #2483e4; --vkui--color_icon_accent--active: #237edd; --vkui--color_icon_accent_themed: #2688eb; --vkui--color_icon_accent_themed--hover: #2483e4; --vkui--color_icon_accent_themed--active: #237edd; --vkui--color_icon_primary_invariably--hover: #2a2c2f; --vkui--color_icon_primary_invariably--active: #282b2f; --vkui--color_icon_medium: #818c99; --vkui--color_icon_medium--hover: #7c8795; --vkui--color_icon_medium--active: #778292; --vkui--color_icon_tertiary: #b8c1cc; --vkui--color_icon_tertiary--hover: #b1bac6; --vkui--color_icon_tertiary--active: #a9b3c1; --vkui--color_stroke_accent: #2688eb; --vkui--color_stroke_accent--hover: #2483e4; --vkui--color_stroke_accent--active: #237edd; --vkui--color_stroke_accent_themed: #2688eb; --vkui--color_stroke_accent_themed--hover: #2483e4; --vkui--color_stroke_accent_themed--active: #237edd; --vkui--color_separator_secondary: #e1e3e6; --vkui--color_separator_secondary--hover: #d8dbdf; --vkui--color_separator_secondary--active: #cfd2d8; --vkui--color_accent_blue: #3f8ae0; --vkui--color_accent_blue--hover: #3c85d9; --vkui--color_accent_blue--active: #3a80d3; --vkui--color_accent_gray--hover: #9ca7b3; --vkui--color_accent_gray--active: #96a0ae; --vkui--color_accent_green--hover: #48ac4a; --vkui--color_accent_green--active: #45a64a; --vkui--color_skeleton_from--hover: #ebecee; --vkui--color_skeleton_from--active: #e1e3e6; --vkui--color_skeleton_to--hover: #d8dbdf; --vkui--color_skeleton_to--active: #cfd2d8; --vkui--color_write_bar_icon: #3f8ae0; --vkui--color_write_bar_icon--hover: #3c85d9; --vkui--color_write_bar_icon--active: #3a80d3; --vkui--color_write_bar_input_background: #f2f3f5; --vkui--color_write_bar_input_background--hover: #e8eaee; --vkui--color_write_bar_input_background--active: #dfe1e6; --vkui--color_track_background: #e1e3e6; --vkui--color_track_background--hover: #d8dbdf; --vkui--color_track_background--active: #cfd2d8; --vkui--color_track_buffer: #a0bfe4; --vkui--color_track_buffer--hover: #9ab8dd; --vkui--color_track_buffer--active: #93b1d7; --vkui--color_search_field_background: #ebedf0; --vkui--color_search_field_background--hover: #e2e4e9; --vkui--color_search_field_background--active: #d8dbe2; --vkui--color_panel_header_icon: #2688eb; --vkui--color_panel_header_icon--hover: #2483e4; --vkui--color_panel_header_icon--active: #237edd; } .vkui--vkBase--dark, .vkui--vkBase--light, .vkui--vkIOS--dark, .vkui--vkIOS--light, :root { --vkui--color_background_contrast_inverse: #2d2d2e; --vkui--color_text_primary_invariably: #000; --vkui--color_link_contrast: #fff; --vkui--color_icon_primary_invariably: #2c2d2e; --vkui--color_accent_gray: #a3adb8; --vkui--color_skeleton_from: #f5f5f5; --vkui--color_skeleton_to: #e1e3e6; } .vkui--vkBase--dark, .vkui--vkBase--light, .vkui--vkCom--light, .vkui--vkIOS--dark, .vkui--vkIOS--light, :root { --vkui--color_icon_contrast: #fff; --vkui--color_accent_purple: #735ce6; --vkui--color_accent_violet: #792ec0; } .vkui--vkBase--dark, .vkui--vkBase--light, .vkui--vkCom--dark, .vkui--vkIOS--dark, .vkui--vkIOS--light, :root { --vkui--color_accent_green: #4bb34b; } .vkui--vkBase--dark { --vkui--theme_name: "vkBaseDark"; } .vkui--vkBase--dark, .vkui--vkCom--dark, .vkui--vkIOS--dark { --vkui--gradient_tint: rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.036) 13%, rgba(32, 32, 33, 0.15) 27%, rgba(32, 32, 33, 0.79) 68%, rgba(32, 32, 33, 0.95) 84%, #202021 100%; --vkui--colors_scheme: dark; --vkui--color_background_accent_tint--hover: #61a2ff; --vkui--color_background_accent_tint--active: #67a6ff; --vkui--color_background_secondary_alpha: hsla(0, 0%, 100%, 0.1); --vkui--color_background_secondary_alpha--hover: hsla(0, 0%, 100%, 0.12); --vkui--color_background_secondary_alpha--active: hsla(0, 0%, 100%, 0.14); --vkui--color_background_tertiary_alpha: hsla(0, 0%, 100%, 0.03); --vkui--color_background_tertiary_alpha--hover: hsla(0, 0%, 100%, 0.07); --vkui--color_background_tertiary_alpha--active: hsla(0, 0%, 100%, 0.11); --vkui--color_background_contrast--hover: #ebedf0; --vkui--color_background_contrast--active: #d7d8db; --vkui--color_background_modal_inverse: #fff; --vkui--color_background_modal_inverse--hover: #ebedf0; --vkui--color_background_modal_inverse--active: #d7d8db; --vkui--color_background_warning: #857250; --vkui--color_background_warning--hover: #8a7857; --vkui--color_background_warning--active: #8f7d5e; --vkui--color_background_positive--hover: #52b652; --vkui--color_background_positive--active: #59b959; --vkui--color_background_negative: #ff5c5c; --vkui--color_background_negative--hover: #ff6363; --vkui--color_background_negative--active: #ff6969; --vkui--color_background_negative_tint: #522e2e; --vkui--color_background_negative_tint--hover: #593636; --vkui--color_background_negative_tint--active: #603f3f; --vkui--color_background_positive_tint--hover: #e9f9e9; --vkui--color_background_positive_tint--active: #eaf9ea; --vkui--color_field_background: #292929; --vkui--color_field_background--hover: #323232; --vkui--color_field_background--active: #3a3a3a; --vkui--color_text_primary: #e1e3e6; --vkui--color_text_primary--hover: #e2e4e7; --vkui--color_text_primary--active: #e3e5e8; --vkui--color_text_contrast--hover: #ebedf0; --vkui--color_text_contrast--active: #d7d8db; --vkui--color_text_positive--hover: #52b652; --vkui--color_text_positive--active: #59b959; --vkui--color_text_negative: #ff5c5c; --vkui--color_text_negative--hover: #ff6363; --vkui--color_text_negative--active: #ff6969; --vkui--color_text_link_visited--hover: #508bce; --vkui--color_text_link_visited--active: #5890d0; --vkui--color_icon_primary: #e1e3e6; --vkui--color_icon_primary--hover: #e2e4e7; --vkui--color_icon_primary--active: #e3e5e8; --vkui--color_icon_contrast_secondary--hover: #f3f3f5; --vkui--color_icon_contrast_secondary--active: #f3f4f6; --vkui--color_icon_positive--hover: #52b652; --vkui--color_icon_positive--active: #59b959; --vkui--color_icon_negative: #ff5c5c; --vkui--color_icon_negative--hover: #ff6363; --vkui--color_icon_negative--active: #ff6969; --vkui--color_separator_primary: #363738; --vkui--color_separator_primary--hover: #3e3f40; --vkui--color_separator_primary--active: #464748; --vkui--color_separator_primary2x: #444546; --vkui--color_separator_primary2x--hover: #4b4c4d; --vkui--color_separator_primary2x--active: #535455; --vkui--color_separator_primary3x: #505253; --vkui--color_separator_primary3x--hover: #57595a; --vkui--color_separator_primary3x--active: #5e6061; --vkui--color_separator_primary_alpha: hsla(0, 0%, 100%, 0.12); --vkui--color_separator_primary_alpha--hover: hsla(0, 0%, 100%, 0.16); --vkui--color_separator_primary_alpha--active: hsla(0, 0%, 100%, 0.2); --vkui--color_stroke_positive--hover: #52b652; --vkui--color_stroke_positive--active: #59b959; --vkui--color_stroke_negative: #ff5c5c; --vkui--color_stroke_negative--hover: #ff6363; --vkui--color_stroke_negative--active: #ff6969; --vkui--color_stroke_contrast--hover: #ebedf0; --vkui--color_stroke_contrast--active: #d7d8db; --vkui--color_image_border_alpha: hsla(0, 0%, 100%, 0.08); --vkui--color_image_border_alpha--hover: hsla(0, 0%, 100%, 0.12); --vkui--color_image_border_alpha--active: hsla(0, 0%, 100%, 0.16); --vkui--color_field_border_alpha: hsla(0, 0%, 100%, 0.12); --vkui--color_field_border_alpha--hover: hsla(0, 0%, 100%, 0.16); --vkui--color_field_border_alpha--active: hsla(0, 0%, 100%, 0.2); --vkui--color_accent_red--hover: #ff3b4e; --vkui--color_accent_red--active: #ff4356; --vkui--color_accent_green--hover: #52b652; --vkui--color_accent_green--active: #59b959; --vkui--color_accent_orange--hover: #ffa40a; --vkui--color_accent_orange--active: #ffa814; --vkui--color_accent_secondary--hover: #478fe1; --vkui--color_accent_secondary--active: #4e93e2; --vkui--color_image_placeholder: #2a2b2c; --vkui--color_image_placeholder--hover: #333334; --vkui--color_image_placeholder--active: #3b3c3d; --vkui--color_image_placeholder_alpha: rgba(241, 247, 255, 0.08); --vkui--color_image_placeholder_alpha--hover: rgba(241, 247, 255, 0.12); --vkui--color_image_placeholder_alpha--active: rgba(241, 247, 255, 0.16); --vkui--color_write_bar_input_border_alpha: hsla(0, 0%, 100%, 0.8); --vkui--color_write_bar_input_border_alpha--hover: hsla(0, 0%, 100%, 0.84); --vkui--color_write_bar_input_border_alpha--active: hsla(0, 0%, 100%, 0.88); --vkui--color_action_sheet_text: #529ef4; --vkui--color_action_sheet_text--hover: #59a2f4; --vkui--color_action_sheet_text--active: #60a6f5; --vkui--color_panel_header_icon: #71aaeb; --vkui--color_panel_header_icon--hover: #77adec; --vkui--color_panel_header_icon--active: #7cb1ed; --vkui--color_segmented_control: #626364; --vkui--color_segmented_control--hover: #68696a; --vkui--color_segmented_control--active: #6f6f70; --vkui--color_transparent--hover: hsla(0, 0%, 100%, 0.04); --vkui--color_transparent--active: hsla(0, 0%, 100%, 0.08); } .vkui--vkBase--dark, .vkui--vkCom--light, .vkui--vkIOS--light { --vkui--theme_inherits_from: "vkBase"; } .vkui--vkBase--dark, .vkui--vkIOS--dark { --vkui--color_background_accent: #529ef4; --vkui--color_background_accent--hover: #59a2f4; --vkui--color_background_accent--active: #60a6f5; --vkui--color_background_accent_themed: #fff; --vkui--color_background_accent_themed--hover: #ebedf0; --vkui--color_background_accent_themed--active: #d7d8db; --vkui--color_background_accent_alternative: #529ef4; --vkui--color_background_accent_alternative--hover: #59a2f4; --vkui--color_background_accent_alternative--active: #60a6f5; --vkui--color_background: #0a0a0a; --vkui--color_background--hover: #141414; --vkui--color_background--active: #1e1e1e; --vkui--color_background_content: #19191a; --vkui--color_background_content--hover: #222223; --vkui--color_background_content--active: #2b2b2c; --vkui--color_background_secondary: #232324; --vkui--color_background_secondary--hover: #2c2c2d; --vkui--color_background_secondary--active: #353536; --vkui--color_background_tertiary: #202021; --vkui--color_background_tertiary--hover: #29292a; --vkui--color_background_tertiary--active: #323233; --vkui--color_background_contrast_inverse--hover: #353536; --vkui--color_background_contrast_inverse--active: #3e3e3f; --vkui--color_background_modal: #2d2d2e; --vkui--color_background_modal--hover: #353536; --vkui--color_background_modal--active: #3e3e3f; --vkui--color_header_background: #19191a; --vkui--color_header_background--hover: #222223; --vkui--color_header_background--active: #2b2b2c; --vkui--color_text_accent: #529ef4; --vkui--color_text_accent--hover: #59a2f4; --vkui--color_text_accent--active: #60a6f5; --vkui--color_text_accent_themed: #fff; --vkui--color_text_accent_themed--hover: #ebedf0; --vkui--color_text_accent_themed--active: #d7d8db; --vkui--color_text_primary_invariably--hover: #0a0a0a; --vkui--color_text_primary_invariably--active: #141414; --vkui--color_text_secondary: #76787a; --vkui--color_text_secondary--hover: #7b7d7f; --vkui--color_text_secondary--active: #818385; --vkui--color_text_subhead: #969a9f; --vkui--color_text_subhead--hover: #9a9ea3; --vkui--color_text_subhead--active: #9ea2a7; --vkui--color_text_tertiary: #636567; --vkui--color_text_tertiary--hover: #696b6d; --vkui--color_text_tertiary--active: #6f7173; --vkui--color_text_contrast_themed: #000; --vkui--color_text_contrast_themed--hover: #0a0a0a; --vkui--color_text_contrast_themed--active: #141414; --vkui--color_text_link: #529ef4; --vkui--color_text_link--hover: #59a2f4; --vkui--color_text_link--active: #60a6f5; --vkui--color_text_link_themed: #fff; --vkui--color_text_link_themed--hover: #ebedf0; --vkui--color_text_link_themed--active: #d7d8db; --vkui--color_text_muted: #e1e3e6; --vkui--color_text_muted--hover: #e2e4e7; --vkui--color_text_muted--active: #e3e5e8; --vkui--color_link_contrast--hover: #ebedf0; --vkui--color_link_contrast--active: #d7d8db; --vkui--color_icon_accent: #529ef4; --vkui--color_icon_accent--hover: #59a2f4; --vkui--color_icon_accent--active: #60a6f5; --vkui--color_icon_accent_themed: #fff; --vkui--color_icon_accent_themed--hover: #ebedf0; --vkui--color_icon_accent_themed--active: #d7d8db; --vkui--color_icon_primary_invariably--hover: #343536; --vkui--color_icon_primary_invariably--active: #3d3e3f; --vkui--color_icon_medium: #b0b1b6; --vkui--color_icon_medium--hover: #b3b4b9; --vkui--color_icon_medium--active: #b6b7bc; --vkui--color_icon_medium_alpha: rgba(241, 247, 255, 0.66); --vkui--color_icon_medium_alpha--hover: rgba(241, 247, 255, 0.7); --vkui--color_icon_medium_alpha--active: rgba(241, 247, 255, 0.74); --vkui--color_icon_secondary: #76787a; --vkui--color_icon_secondary--hover: #7b7d7f; --vkui--color_icon_secondary--active: #818385; --vkui--color_icon_secondary_alpha: rgba(0, 0, 0, 0.43); --vkui--color_icon_secondary_alpha--hover: rgba(0, 0, 0, 0.47); --vkui--color_icon_secondary_alpha--active: rgba(0, 0, 0, 0.51); --vkui--color_icon_tertiary: #5d5f61; --vkui--color_icon_tertiary--hover: #636567; --vkui--color_icon_tertiary--active: #6a6c6e; --vkui--color_icon_tertiary_alpha: hsla(0, 0%, 100%, 0.3); --vkui--color_icon_tertiary_alpha--hover: hsla(0, 0%, 100%, 0.34); --vkui--color_icon_tertiary_alpha--active: hsla(0, 0%, 100%, 0.38); --vkui--color_icon_contrast--hover: #ebedf0; --vkui--color_icon_contrast--active: #d7d8db; --vkui--color_icon_contrast_themed: #000; --vkui--color_icon_contrast_themed--hover: #0a0a0a; --vkui--color_icon_contrast_themed--active: #141414; --vkui--color_stroke_accent: #529ef4; --vkui--color_stroke_accent--hover: #59a2f4; --vkui--color_stroke_accent--active: #60a6f5; --vkui--color_stroke_accent_themed: #fff; --vkui--color_stroke_accent_themed--hover: #ebedf0; --vkui--color_stroke_accent_themed--active: #d7d8db; --vkui--color_separator_secondary: #141415; --vkui--color_separator_secondary--hover: #1d1d1e; --vkui--color_separator_secondary--active: #272728; --vkui--color_accent_blue: #529ef4; --vkui--color_accent_blue--hover: #59a2f4; --vkui--color_accent_blue--active: #60a6f5; --vkui--color_accent_gray--hover: #a7b0bb; --vkui--color_accent_gray--active: #aab4be; --vkui--color_accent_purple--hover: #7963e7; --vkui--color_accent_purple--active: #7e69e8; --vkui--color_accent_violet--hover: #7e36c3; --vkui--color_accent_violet--active: #843fc5; --vkui--color_skeleton_from--hover: #f5f5f5; --vkui--color_skeleton_from--active: #f6f6f6; --vkui--color_skeleton_to--hover: #e2e4e7; --vkui--color_skeleton_to--active: #e3e5e8; --vkui--color_write_bar_icon: #529ef4; --vkui--color_write_bar_icon--hover: #59a2f4; --vkui--color_write_bar_icon--active: #60a6f5; --vkui--color_write_bar_input_background: #232324; --vkui--color_write_bar_input_background--hover: #2c2c2d; --vkui--color_write_bar_input_background--active: #353536; --vkui--color_track_background: #454647; --vkui--color_track_background--hover: #4c4d4e; --vkui--color_track_background--active: #545556; --vkui--color_track_buffer: #405772; --vkui--color_track_buffer--hover: #485e78; --vkui--color_track_buffer--active: #4f647d; --vkui--color_search_field_background: #363738; --vkui--color_search_field_background--hover: #3e3f40; --vkui--color_search_field_background--active: #464748; } .vkui--vkIOS--light { --vkui--theme_name: "vkIOS"; } .vkui--vkIOS--dark, .vkui--vkIOS--light { --vkui--theme_name_base: "vkIOS"; --vkui--size_border_radius--regular: 10px; --vkui--size_card_border_radius--regular: 10px; --vkui--size_base_padding_horizontal--regular: 12px; --vkui--size_switch_height--regular: 31px; --vkui--size_switch_height--compact: 27px; --vkui--size_switch_width--regular: 51px; --vkui--size_switch_width--compact: 47px; --vkui--size_switch_pin--regular: 27px; --vkui--size_switch_pin--compact: 23px; --vkui--size_panel_header_height--regular: 52px; --vkui--animation_easing_platform: cubic-bezier(0.36, 0.66, 0.04, 1); } .vkui--vkIOS--dark { --vkui--theme_name: "vkIOSDark"; } .vkui--vkCom--dark, .vkui--vkIOS--dark { --vkui--theme_inherits_from: "vkBaseDark"; } .vkui--vkCom--light { --vkui--theme_name: "vkCom"; --vkui--color_background_accent: #447bba; --vkui--color_background_accent--hover: #4177b5; --vkui--color_background_accent--active: #3f72b0; --vkui--color_background_accent_themed: #447bba; --vkui--color_background_accent_themed--hover: #4177b5; --vkui--color_background_accent_themed--active: #3f72b0; --vkui--color_background_accent_alternative: #447bba; --vkui--color_background_accent_alternative--hover: #4177b5; --vkui--color_background_accent_alternative--active: #3f72b0; --vkui--color_background: #edeef0; --vkui--color_background--hover: #e4e5e9; --vkui--color_background--active: #dadce2; --vkui--color_background_secondary: #f0f2f5; --vkui--color_background_secondary--hover: #e6e9ee; --vkui--color_background_secondary--active: #dde0e6; --vkui--color_background_tertiary: #fafbfc; --vkui--color_background_tertiary--hover: #f0f2f4; --vkui--color_background_tertiary--active: #e6e8ed; --vkui--color_background_contrast_inverse--hover: #313233; --vkui--color_background_contrast_inverse--active: #2f3034; --vkui--color_background_modal_inverse: #000; --vkui--color_background_modal_inverse--hover: #000102; --vkui--color_background_modal_inverse--active: #000105; --vkui--color_field_background: #f7f8fa; --vkui--color_field_background--hover: #edeff2; --vkui--color_field_background--active: #e3e5eb; --vkui--color_text_accent: #447bba; --vkui--color_text_accent--hover: #4177b5; --vkui--color_text_accent--active: #3f72b0; --vkui--color_text_accent_themed: #447bba; --vkui--color_text_accent_themed--hover: #4177b5; --vkui--color_text_accent_themed--active: #3f72b0; --vkui--color_text_primary_invariably--hover: #313233; --vkui--color_text_primary_invariably--active: #2f3034; --vkui--color_text_subhead: #626d7a; --vkui--color_text_subhead--hover: #5e6978; --vkui--color_text_subhead--active: #5a6675; --vkui--color_text_link: #2a5885; --vkui--color_text_link--hover: #285582; --vkui--color_text_link--active: #27527f; --vkui--color_text_link_themed: #2a5885; --vkui--color_text_link_themed--hover: #285582; --vkui--color_text_link_themed--active: #27527f; --vkui--color_text_muted: #333; --vkui--color_text_muted--hover: #313233; --vkui--color_text_muted--active: #2f3034; --vkui--color_link_contrast: #333; --vkui--color_link_contrast--hover: #313233; --vkui--color_link_contrast--active: #2f3034; --vkui--color_icon_accent: #447bba; --vkui--color_icon_accent--hover: #4177b5; --vkui--color_icon_accent--active: #3f72b0; --vkui--color_icon_accent_themed: #447bba; --vkui--color_icon_accent_themed--hover: #4177b5; --vkui--color_icon_accent_themed--active: #3f72b0; --vkui--color_icon_primary_invariably--hover: #313233; --vkui--color_icon_primary_invariably--active: #2f3034; --vkui--color_icon_medium: #6f7985; --vkui--color_icon_medium--hover: #6b7582; --vkui--color_icon_medium--active: #66717f; --vkui--color_icon_tertiary: #aeb7c2; --vkui--color_icon_tertiary--hover: #a7b0bd; --vkui--color_icon_tertiary--active: #a0aab7; --vkui--color_stroke_accent: #447bba; --vkui--color_stroke_accent--hover: #4177b5; --vkui--color_stroke_accent--active: #3f72b0; --vkui--color_stroke_accent_themed: #447bba; --vkui--color_stroke_accent_themed--hover: #4177b5; --vkui--color_stroke_accent_themed--active: #3f72b0; --vkui--color_separator_secondary: #e7e8ec; --vkui--color_separator_secondary--hover: #dedfe5; --vkui--color_separator_secondary--active: #d5d7de; --vkui--color_accent_blue: #5181b8; --vkui--color_accent_blue--hover: #4e7cb3; --vkui--color_accent_blue--active: #4b78ae; --vkui--color_accent_gray--hover: #a7b0bd; --vkui--color_accent_gray--active: #a0aab7; --vkui--color_accent_green: #1b7a1b; --vkui--color_accent_green--hover: #1a761c; --vkui--color_accent_green--active: #19721e; --vkui--color_skeleton_from: #f0f2f5; --vkui--color_skeleton_from--hover: #e6e9ee; --vkui--color_skeleton_from--active: #dde0e6; --vkui--color_skeleton_to: #e7e8ec; --vkui--color_skeleton_to--hover: #dedfe5; --vkui--color_skeleton_to--active: #d5d7de; --vkui--color_write_bar_icon: #818c99; --vkui--color_write_bar_icon--hover: #7c8795; --vkui--color_write_bar_icon--active: #778292; --vkui--color_write_bar_input_background: #fff; --vkui--color_write_bar_input_background--hover: #f5f5f7; --vkui--color_write_bar_input_background--active: #ebecef; --vkui--color_track_background: #d3d9de; --vkui--color_track_background--hover: #cbd1d8; --vkui--color_track_background--active: #c2c9d1; --vkui--color_track_buffer: #447bba; --vkui--color_track_buffer--hover: #4177b5; --vkui--color_track_buffer--active: #3f72b0; --vkui--color_search_field_background: #edeef0; --vkui--color_search_field_background--hover: #e4e5e9; --vkui--color_search_field_background--active: #dadce2; --vkui--color_panel_header_icon: #447bba; --vkui--color_panel_header_icon--hover: #4177b5; --vkui--color_panel_header_icon--active: #3f72b0; } .vkui--vkCom--dark, .vkui--vkCom--light { --vkui--theme_name_base: "vkCom"; --vkui--size_switch_height--regular: 10px; --vkui--size_switch_height--compact: 10px; --vkui--size_switch_width--regular: 27px; --vkui--size_switch_width--compact: 27px; --vkui--size_switch_pin--regular: 16px; --vkui--size_switch_pin--compact: 16px; --vkui--size_panel_header_height--regular: 48px; --vkui--color_background_contrast_inverse: #333; --vkui--color_text_primary_invariably: #333; --vkui--color_icon_primary_invariably: #333; --vkui--color_accent_gray: #aeb7c2; } .vkui--vkCom--dark { --vkui--theme_name: "vkComDark"; --vkui--color_background_accent: #71aaeb; --vkui--color_background_accent--hover: #77adec; --vkui--color_background_accent--active: #7cb1ed; --vkui--color_background_accent_themed: #e1e3e6; --vkui--color_background_accent_themed--hover: #d8dbdf; --vkui--color_background_accent_themed--active: #cfd2d8; --vkui--color_background_accent_alternative: #71aaeb; --vkui--color_background_accent_alternative--hover: #77adec; --vkui--color_background_accent_alternative--active: #7cb1ed; --vkui--color_background: #141414; --vkui--color_background--hover: #1d1d1d; --vkui--color_background--active: #272727; --vkui--color_background_content: #222; --vkui--color_background_content--hover: #2b2b2b; --vkui--color_background_content--active: #343434; --vkui--color_background_secondary: #333; --vkui--color_background_secondary--hover: #3b3b3b; --vkui--color_background_secondary--active: #434343; --vkui--color_background_tertiary: #292929; --vkui--color_background_tertiary--hover: #323232; --vkui--color_background_tertiary--active: #3a3a3a; --vkui--color_background_contrast_inverse--hover: #3b3b3b; --vkui--color_background_contrast_inverse--active: #434343; --vkui--color_background_modal: #333; --vkui--color_background_modal--hover: #3b3b3b; --vkui--color_background_modal--active: #434343; --vkui--color_header_background: #222; --vkui--color_header_background--hover: #2b2b2b; --vkui--color_header_background--active: #343434; --vkui--color_text_accent: #71aaeb; --vkui--color_text_accent--hover: #77adec; --vkui--color_text_accent--active: #7cb1ed; --vkui--color_text_accent_themed: #e1e3e6; --vkui--color_text_accent_themed--hover: #e2e4e7; --vkui--color_text_accent_themed--active: #e3e5e8; --vkui--color_text_primary_invariably--hover: #3b3b3b; --vkui--color_text_primary_invariably--active: #434343; --vkui--color_text_secondary: #b2b2b2; --vkui--color_text_secondary--hover: #b5b5b5; --vkui--color_text_secondary--active: #b8b8b8; --vkui--color_text_subhead: #939393; --vkui--color_text_subhead--hover: #979797; --vkui--color_text_subhead--active: #9c9c9c; --vkui--color_text_tertiary: #656565; --vkui--color_text_tertiary--hover: #6b6b6b; --vkui--color_text_tertiary--active: #717171; --vkui--color_text_contrast_themed: #222; --vkui--color_text_contrast_themed--hover: #2b2b2b; --vkui--color_text_contrast_themed--active: #343434; --vkui--color_text_link: #71aaeb; --vkui--color_text_link--hover: #77adec; --vkui--color_text_link--active: #7cb1ed; --vkui--color_text_link_themed: #939393; --vkui--color_text_link_themed--hover: #979797; --vkui--color_text_link_themed--active: #9c9c9c; --vkui--color_text_muted: #ccc; --vkui--color_text_muted--hover: #cecece; --vkui--color_text_muted--active: #d0d0d0; --vkui--color_link_contrast: #ccc; --vkui--color_link_contrast--hover: #cecece; --vkui--color_link_contrast--active: #d0d0d0; --vkui--color_icon_accent: #71aaeb; --vkui--color_icon_accent--hover: #77adec; --vkui--color_icon_accent--active: #7cb1ed; --vkui--color_icon_accent_themed: #e1e3e6; --vkui--color_icon_accent_themed--hover: #e2e4e7; --vkui--color_icon_accent_themed--active: #e3e5e8; --vkui--color_icon_primary_invariably--hover: #3b3b3b; --vkui--color_icon_primary_invariably--active: #434343; --vkui--color_icon_medium: #939393; --vkui--color_icon_medium--hover: #979797; --vkui--color_icon_medium--active: #9c9c9c; --vkui--color_icon_medium_alpha: hsla(0, 0%, 100%, 0.48); --vkui--color_icon_medium_alpha--hover: hsla(0, 0%, 100%, 0.52); --vkui--color_icon_medium_alpha--active: hsla(0, 0%, 100%, 0.56); --vkui--color_icon_secondary: #828282; --vkui--color_icon_secondary--hover: #878787; --vkui--color_icon_secondary--active: #8c8c8c; --vkui--color_icon_secondary_alpha: hsla(0, 0%, 100%, 0.4); --vkui--color_icon_secondary_alpha--hover: hsla(0, 0%, 100%, 0.44); --vkui--color_icon_secondary_alpha--active: hsla(0, 0%, 100%, 0.48); --vkui--color_icon_tertiary: #656565; --vkui--color_icon_tertiary--hover: #6b6b6b; --vkui--color_icon_tertiary--active: #717171; --vkui--color_icon_tertiary_alpha: hsla(0, 0%, 100%, 0.24); --vkui--color_icon_tertiary_alpha--hover: hsla(0, 0%, 100%, 0.28); --vkui--color_icon_tertiary_alpha--active: hsla(0, 0%, 100%, 0.32); --vkui--color_icon_contrast: #e1e3e6; --vkui--color_icon_contrast--hover: #e2e4e7; --vkui--color_icon_contrast--active: #e3e5e8; --vkui--color_icon_contrast_themed: #222; --vkui--color_icon_contrast_themed--hover: #2b2b2b; --vkui--color_icon_contrast_themed--active: #343434; --vkui--color_stroke_accent: #71aaeb; --vkui--color_stroke_accent--hover: #77adec; --vkui--color_stroke_accent--active: #7cb1ed; --vkui--color_stroke_accent_themed: #e1e3e6; --vkui--color_stroke_accent_themed--hover: #e2e4e7; --vkui--color_stroke_accent_themed--active: #e3e5e8; --vkui--color_separator_secondary: #292929; --vkui--color_separator_secondary--hover: #323232; --vkui--color_separator_secondary--active: #3a3a3a; --vkui--color_accent_blue: #397dcc; --vkui--color_accent_blue--hover: #4182ce; --vkui--color_accent_blue--active: #4987d0; --vkui--color_accent_gray--hover: #b1bac4; --vkui--color_accent_gray--active: #b4bdc7; --vkui--color_accent_purple: #937ff5; --vkui--color_accent_purple--hover: #9784f5; --vkui--color_accent_purple--active: #9c89f6; --vkui--color_accent_violet: #a393f5; --vkui--color_accent_violet--hover: #a797f5; --vkui--color_accent_violet--active: #aa9cf6; --vkui--color_skeleton_from: #292929; --vkui--color_skeleton_from--hover: #323232; --vkui--color_skeleton_from--active: #3a3a3a; --vkui--color_skeleton_to: #333; --vkui--color_skeleton_to--hover: #3b3b3b; --vkui--color_skeleton_to--active: #434343; --vkui--color_write_bar_icon: #e1e3e6; --vkui--color_write_bar_icon--hover: #e2e4e7; --vkui--color_write_bar_icon--active: #e3e5e8; --vkui--color_write_bar_input_background: #424242; --vkui--color_write_bar_input_background--hover: #4a4a4a; --vkui--color_write_bar_input_background--active: #515151; --vkui--color_track_background: #828282; --vkui--color_track_background--hover: #878787; --vkui--color_track_background--active: #8c8c8c; --vkui--color_track_buffer: #fff; --vkui--color_track_buffer--hover: #ebedf0; --vkui--color_track_buffer--active: #d7d8db; --vkui--color_search_field_background: #424242; --vkui--color_search_field_background--hover: #4a4a4a; --vkui--color_search_field_background--active: #515151; } .vkui__portal-root, .vkui__root { --font-common: var( --palette-vk-font, -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif ); --font-tt: "TT Commons", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; --font-display: "VK Sans Display", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; --ios-easing: cubic-bezier(0.36, 0.66, 0.04, 1); --android-easing: cubic-bezier(0.4, 0, 0.2, 1); --tabbar_height: 48px; --panelheader_height: 56px; --panelheader_height_ios: 52px; --panelheader_height_vkcom: 48px; --search_default_height: 36px; --thin-border: 1px; --popover-safe-zone-padding: 8px; --formitem_padding: 16px; --white: #fff; --blue_200: #5c9ce6; --safe-area-inset-top: 0px; --safe-area-inset-right: 0px; --safe-area-inset-bottom: 0px; --safe-area-inset-left: 0px; --duration: 0.7s; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .vkui__portal-root, .vkui__root { --thin-border: 0.5px; } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .vkui__portal-root, .vkui__root { --thin-border: 0.33px; } } @supports (padding-top: constant(safe-area-inset-top)) { .vkui__portal-root, .vkui__root { --safe-area-inset-top: constant(safe-area-inset-top); --safe-area-inset-right: constant(safe-area-inset-right); --safe-area-inset-bottom: constant(safe-area-inset-bottom); --safe-area-inset-left: constant(safe-area-inset-left); } } @supports (padding-top: env(safe-area-inset-top)) { .vkui__portal-root, .vkui__root { --safe-area-inset-top: env(safe-area-inset-top); --safe-area-inset-right: env(safe-area-inset-right); --safe-area-inset-bottom: env(safe-area-inset-bottom); --safe-area-inset-left: env(safe-area-inset-left); } } @-webkit-keyframes vkui-rotator { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes vkui-rotator { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @-webkit-keyframes vkui-popper-fadein { 0% { opacity: 0; } to { opacity: 1; } } @keyframes vkui-popper-fadein { 0% { opacity: 0; } to { opacity: 1; } } .vkui__root--embedded { overflow-x: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .vkuiAppRoot { height: 100%; } .vkui__root--embedded .vkuiAppRoot { overflow: auto; } .vkui--sizeX-regular { background: #ebedf0; background: var(--background_page, var(--vkui--color_background)); } .vkuiAppRoot--no-mouse { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vkuiTitle { display: block; margin: 0; } .vkuiTitle--l-1 { font-size: 24px; font-size: var(--vkui--font_title1--font_size--regular, 24px); font-weight: 600; font-weight: var(--vkui--font_title1--font_weight--regular, 600); line-height: 28px; line-height: var(--vkui--font_title1--line_height--regular, 28px); } .vkuiTitle--l-2 { font-size: 20px; font-size: var(--vkui--font_title2--font_size--regular, 20px); font-weight: 600; font-weight: var(--vkui--font_title2--font_weight--regular, 600); line-height: 24px; line-height: var(--vkui--font_title2--line_height--regular, 24px); } .vkuiTitle--l-3 { font-size: 17px; font-size: var(--vkui--font_title3--font_size--regular, 17px); font-weight: 600; font-weight: var(--vkui--font_title3--font_weight--regular, 600); line-height: 22px; line-height: var(--vkui--font_title3--line_height--regular, 22px); } .vkuiTitle--w-regular { font-weight: 400; } .vkuiTitle--w-medium { font-weight: 500; } .vkuiTitle--w-semibold { font-weight: 600; } .vkuiTitle--w-bold { font-weight: 700; } .vkuiTitle--w-heavy { font-weight: 800; } .vkuiTitle--w-1 { font-weight: 600; font-weight: var(--vkui--font_weight_accent1, 600); } .vkuiTitle--w-2 { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiTitle--w-3 { font-weight: 400; font-weight: var(--vkui--font_weight_accent3, 400); } .vkuiHeadline { display: block; margin: 0; } .vkuiHeadline--l-1 { font-size: 16px; font-size: var(--vkui--font_headline1--font_size--regular, 16px); font-weight: 500; font-weight: var(--vkui--font_headline1--font_weight--regular, 500); line-height: 20px; line-height: var(--vkui--font_headline1--line_height--regular, 20px); } .vkuiHeadline--l-2 { font-size: 15px; font-size: var(--vkui--font_headline2--font_size--regular, 15px); font-weight: 500; font-weight: var(--vkui--font_headline2--font_weight--regular, 500); line-height: 20px; line-height: var(--vkui--font_headline2--line_height--regular, 20px); } .vkuiHeadline--sizeY-compact.vkuiHeadline--l-1 { font-size: 15px; font-size: var(--vkui--font_headline1--font_size--compact, 15px); line-height: 20px; line-height: var(--vkui--font_headline1--line_height--compact, 20px); } .vkuiHeadline--sizeY-compact.vkuiHeadline--l-2 { font-size: 14px; font-size: var(--vkui--font_headline2--font_size--compact, 14px); line-height: 20px; line-height: var(--vkui--font_headline2--line_height--compact, 20px); } .vkuiHeadline--w-regular { font-weight: 400; } .vkuiHeadline--w-medium { font-weight: 500; } .vkuiHeadline--w-semibold { font-weight: 600; } .vkuiHeadline--android.vkuiHeadline--w-semibold { font-weight: 500; } .vkuiHeadline--w-1 { font-weight: 600; font-weight: var(--vkui--font_weight_accent1, 600); } .vkuiHeadline--w-2 { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiHeadline--w-3 { font-weight: 400; font-weight: var(--vkui--font_weight_accent3, 400); } .vkuiPanelHeaderContent__children .vkuiHeadline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiText { display: block; font-size: 16px; font-size: var(--vkui--font_text--font_size--regular, 16px); font-weight: 400; font-weight: var(--vkui--font_text--font_weight--regular, 400); line-height: 20px; line-height: var(--vkui--font_text--line_height--regular, 20px); margin: 0; } .vkuiText--sizeY-compact { font-size: 15px; font-size: var(--vkui--font_text--font_size--compact, 15px); line-height: 20px; line-height: var(--vkui--font_text--line_height--compact, 20px); } .vkuiText--w-regular { font-weight: 400; } .vkuiText--w-medium { font-weight: 500; } .vkuiText--w-1, .vkuiText--w-semibold { font-weight: 600; } .vkuiText--w-1 { font-weight: var(--vkui--font_weight_accent1, 600); } .vkuiText--w-2 { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiText--w-3 { font-weight: 400; font-weight: var(--vkui--font_weight_accent3, 400); } .vkuiPanelHeaderContent__children .vkuiText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiParagraph { font-size: 15px; font-size: var(--vkui--font_paragraph--font_size--regular, 15px); font-weight: 400; font-weight: var(--vkui--font_paragraph--font_weight--regular, 400); line-height: 20px; line-height: var(--vkui--font_paragraph--line_height--regular, 20px); } .vkuiParagraph--w-1 { font-weight: 600; font-weight: var(--vkui--font_weight_accent1, 600); } .vkuiParagraph--w-2 { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiParagraph--w-3 { font-weight: 400; font-weight: var(--vkui--font_weight_accent3, 400); } .vkuiSubhead { font-size: 14px; font-size: var(--vkui--font_subhead--font_size--regular, 14px); font-weight: 400; font-weight: var(--vkui--font_subhead--font_weight--regular, 400); line-height: 18px; line-height: var(--vkui--font_subhead--line_height--regular, 18px); margin: 0; } .vkuiSubhead--sizeY-compact { font-size: 13px; font-size: var(--vkui--font_subhead--font_size--compact, 13px); line-height: 16px; line-height: var(--vkui--font_subhead--line_height--compact, 16px); } .vkuiSubhead--w-regular { font-weight: 400; } .vkuiSubhead--w-medium { font-weight: 500; } .vkuiSubhead--w-semibold { font-weight: 600; } .vkuiSubhead--w-bold { font-weight: 700; } .vkuiSubhead--w-1 { font-weight: 600; font-weight: var(--vkui--font_weight_accent1, 600); } .vkuiSubhead--w-2 { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiSubhead--w-3 { font-weight: 400; font-weight: var(--vkui--font_weight_accent3, 400); } .vkuiFootnote { display: block; font-size: 13px; font-size: var(--vkui--font_footnote--font_size--regular, 13px); font-weight: 400; font-weight: var(--vkui--font_footnote--font_weight--regular, 400); line-height: 16px; line-height: var(--vkui--font_footnote--line_height--regular, 16px); margin: 0; } .vkuiFootnote--caps { font-size: 13px; font-size: var(--vkui--font_footnote_caps--font_size--regular, 13px); font-weight: 400; font-weight: var(--vkui--font_footnote_caps--font_weight--regular, 400); line-height: 16px; line-height: var(--vkui--font_footnote_caps--line_height--regular, 16px); text-transform: uppercase; } .vkuiFootnote--w-1 { font-weight: 600; font-weight: var(--vkui--font_weight_accent1, 600); } .vkuiFootnote--w-2 { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiFootnote--w-3 { font-weight: 400; font-weight: var(--vkui--font_weight_accent3, 400); } .vkuiCaption { display: block; margin: 0; } .vkuiCaption--caps { text-transform: uppercase; } .vkuiCaption--l-1 { font-size: 13px; font-size: var(--vkui--font_footnote--font_size--regular, 13px); font-weight: 400; font-weight: var(--vkui--font_footnote--font_weight--regular, 400); line-height: 16px; line-height: var(--vkui--font_footnote--line_height--regular, 16px); } .vkuiCaption--l-1.vkuiCaption--caps { font-size: 13px; font-size: var(--vkui--font_footnote_caps--font_size--regular, 13px); font-weight: 400; font-weight: var(--vkui--font_footnote_caps--font_weight--regular, 400); line-height: 16px; line-height: var(--vkui--font_footnote_caps--line_height--regular, 16px); } .vkuiCaption--l-2 { font-size: 12px; font-size: var(--vkui--font_caption1--font_size--regular, 12px); font-weight: 400; font-weight: var(--vkui--font_caption1--font_weight--regular, 400); line-height: 14px; line-height: var(--vkui--font_caption1--line_height--regular, 14px); } .vkuiCaption--l-2.vkuiCaption--caps { font-size: 12px; font-size: var(--vkui--font_caption1_caps--font_size--regular, 12px); font-weight: 600; font-weight: var(--vkui--font_caption1_caps--font_weight--regular, 600); line-height: 14px; line-height: var(--vkui--font_caption1_caps--line_height--regular, 14px); } .vkuiCaption--l-3 { font-size: 11px; font-size: var(--vkui--font_caption2--font_size--regular, 11px); font-weight: 400; font-weight: var(--vkui--font_caption2--font_weight--regular, 400); line-height: 14px; line-height: var(--vkui--font_caption2--line_height--regular, 14px); } .vkuiCaption--l-3.vkuiCaption--caps { font-size: 11px; font-size: var(--vkui--font_caption2_caps--font_size--regular, 11px); font-weight: 600; font-weight: var(--vkui--font_caption2_caps--font_weight--regular, 600); line-height: 14px; line-height: var(--vkui--font_caption2_caps--line_height--regular, 14px); } .vkuiCaption--l-4 { font-size: 9px; font-size: var(--vkui--font_caption3--font_size--regular, 9px); font-weight: 400; font-weight: var(--vkui--font_caption3--font_weight--regular, 400); line-height: 12px; line-height: var(--vkui--font_caption3--line_height--regular, 12px); } .vkuiCaption--l-4.vkuiCaption--caps { font-size: 9px; font-size: var(--vkui--font_caption3_caps--font_size--regular, 9px); font-weight: 600; font-weight: var(--vkui--font_caption3_caps--font_weight--regular, 600); line-height: 12px; line-height: var(--vkui--font_caption3_caps--line_height--regular, 12px); } .vkuiCaption.vkuiCaption--w-1 { font-weight: 600; font-weight: var(--vkui--font_weight_accent1, 600); } .vkuiCaption.vkuiCaption--w-2 { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiCaption.vkuiCaption--w-3 { font-weight: 400; font-weight: var(--vkui--font_weight_accent3, 400); } .vkuiCaption--w-regular { font-weight: 400; } .vkuiCaption--w-medium { font-weight: 500; } .vkuiCaption--w-semibold { font-weight: 600; } .vkuiCaption--w-bold { font-weight: 700; } .vkuiTappable { border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); cursor: default; position: relative; transition: background-color 0.15s ease-out; } .vkuiTappable--hasActive, .vkuiTappable--hasHover { cursor: pointer; } .vkuiTappable[aria-disabled="true"], .vkuiTappable[disabled] { cursor: default; } .vkuiTappable--focus-visible { outline: none; } .vkuiTappable--active-background.vkuiTappable--active-background.vkuiTappable--active-background { background-color: rgba(0, 0, 0, 0.08); background-color: var( --background_highlighted, var(--vkui--color_transparent--active) ); } .vkuiTappable--active-opacity.vkuiTappable--active-opacity.vkuiTappable--active-opacity { opacity: 0.7; } .vkuiTappable__hoverShadow { border-radius: inherit; bottom: 0; left: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; } .vkuiTappable--hover-background > .vkuiTappable__hoverShadow { background-color: rgba(0, 0, 0, 0.04); background-color: var( --background_hover, var(--vkui--color_transparent--hover) ); } .vkuiTappable--hover-opacity { opacity: 0.8; } .vkuiTappable--mouse { transition: opacity 0.15s ease-out; } .vkuiTappable--mouse .vkuiTappable__hoverShadow { transition: background-color 0.15s ease-out; } .vkuiTappable--ios.vkuiTappable--active-background { transition: none; } .vkuiTappable .vkuiTappable__waves { border-radius: inherit; bottom: 0; left: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; will-change: transform; } .vkuiTappable .vkuiTappable__wave { -webkit-animation: vkui-animation-wave 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: vkui-animation-wave 0.3s cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation: vkui-animation-wave 0.3s var(--android-easing); animation: vkui-animation-wave 0.3s var(--android-easing); background: hsla(0, 0%, 50%, 0.1); border-radius: 50%; content: ""; height: 24px; left: 0; margin: -12px 0 0 -12px; opacity: 0; position: absolute; top: 0; width: 24px; } .vkuiTappable--sizeX-compact { border-radius: 0; } @-webkit-keyframes vkui-animation-wave { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 30% { opacity: 1; } to { opacity: 0; -webkit-transform: scale(8); transform: scale(8); } } @keyframes vkui-animation-wave { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 30% { opacity: 1; } to { opacity: 0; -webkit-transform: scale(8); transform: scale(8); } } .vkuiFixedLayout { box-sizing: border-box; left: auto; padding-left: 0; padding-left: var(--safe-area-inset-left); padding-right: 0; padding-right: var(--safe-area-inset-right); position: fixed; z-index: 3; } .vkuiFixedLayout--filled { background: #fff; background: var(--background_content, var(--vkui--color_background_content)); } .vkuiFixedLayout--top { top: 0; width: 100%; } .vkuiFixedLayout--bottom { bottom: 0; padding-bottom: 0; padding-bottom: var(--safe-area-inset-bottom); width: 100%; } .vkuiEpic .vkuiFixedLayout--bottom { padding-bottom: 48px; padding-bottom: calc(var(--tabbar_height) + var(--safe-area-inset-bottom)); } .vkuiPanelHeader ~ * .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed), .vkuiPanelHeader ~ .vkuiFixedLayout--top { top: 56px; top: calc(56px + var(--safe-area-inset-top)); top: calc( var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) + var(--safe-area-inset-top) ); } .vkuiPanelHeader--ios ~ * .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed), .vkuiPanelHeader--ios ~ .vkuiFixedLayout--top { top: 52px; top: calc(56px + var(--safe-area-inset-top)); top: calc( var( --panelheader_height_ios, var(--vkui--size_panel_header_height--regular) ) + var(--safe-area-inset-top) ); } .vkuiPanelHeader--vkcom ~ * .vkuiFixedLayout--top:not(.vkuiPanelHeader__fixed), .vkuiPanelHeader--vkcom ~ .vkuiFixedLayout--top { top: 48px; top: calc(56px + var(--safe-area-inset-top)); top: calc( var( --panelheader_height_vkcom, var(--vkui--size_panel_header_height--regular) ) + var(--safe-area-inset-top) ); } .vkuiFixedLayout.vkuiPanelHeaderContext { z-index: 4; } .vkuiButton { border: none; border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-sizing: border-box; display: inline-block; margin: 0; max-width: 100%; min-height: 28px; min-height: var(--vkui--size_button_small_height--compact, 28px); min-width: 80px; min-width: var(--vkui--size_button_minimum_width--regular, 80px); padding: 0; position: relative; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vkuiButton--loading { cursor: progress; } .vkuiButton--singleIcon { min-width: auto; width: 28px; width: var(--vkui--size_button_small_height--compact, 28px); } .vkuiButton--stretched { display: block; flex-basis: 0; flex-grow: 1; width: 100%; } .vkuiButton__in { align-items: center; box-sizing: border-box; display: flex; justify-content: center; min-height: inherit; text-align: center; width: 100%; } .vkuiButton--aln-left .vkuiButton__in { justify-content: flex-start; text-align: left; } .vkuiButton--aln-right .vkuiButton__in { justify-content: flex-end; text-align: right; } .vkuiButton[disabled] { opacity: 0.4; opacity: var(--vkui--opacity_disable, 0.4); } .vkuiButton--lvl-outline[disabled]:not(.vkuiButton--clr-overlay), .vkuiButton--lvl-primary[disabled]:not(.vkuiButton--clr-overlay):not( .vkuiButton--clr-negative ):not(.vkuiButton--clr-positive), .vkuiButton--lvl-secondary[disabled]:not(.vkuiButton--clr-overlay), .vkuiButton--lvl-tertiary[disabled]:not(.vkuiButton--clr-overlay) { opacity: 0.64; } .vkuiButton__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiButton--sz-s .vkuiButton__content:first-child { padding-left: 16px; padding-left: var( --vkui--size_button_base_small_padding_horizontal--regular, 16px ); } .vkuiButton--sz-s .vkuiButton__after, .vkuiButton--sz-s .vkuiButton__content:last-child { padding-right: 16px; padding-right: var( --vkui--size_button_base_small_padding_horizontal--regular, 16px ); } .vkuiButton--sz-m .vkuiButton__content:first-child { padding-left: 16px; padding-left: var( --vkui--size_button_base_medium_padding_horizontal--regular, 16px ); } .vkuiButton--sz-m .vkuiButton__after, .vkuiButton--sz-m .vkuiButton__content:last-child { padding-right: 16px; padding-right: var( --vkui--size_button_base_medium_padding_horizontal--regular, 16px ); } .vkuiButton--sz-l .vkuiButton__content:first-child { padding-left: 20px; padding-left: var( --vkui--size_button_base_large_padding_horizontal--regular, 20px ); } .vkuiButton--sz-l .vkuiButton__after, .vkuiButton--sz-l .vkuiButton__content:last-child { padding-right: 20px; padding-right: var( --vkui--size_button_base_large_padding_horizontal--regular, 20px ); } .vkuiButton--sz-s .vkuiButton__before { padding-left: 12px; padding-left: var( --vkui--size_button_base_small_padding_horizontal_icon--regular, 12px ); } .vkuiButton--sz-m .vkuiButton__before { padding-left: 12px; padding-left: var( --vkui--size_button_base_medium_padding_horizontal_icon--regular, 12px ); } .vkuiButton--sz-l .vkuiButton__before { padding-left: 16px; padding-left: var( --vkui--size_button_base_large_padding_horizontal_icon--regular, 16px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__content:first-child { padding-left: 12px; padding-left: var( --vkui--size_button_tertiary_small_padding_horizontal--regular, 12px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__after, .vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__content:last-child { padding-right: 12px; padding-right: var( --vkui--size_button_tertiary_small_padding_horizontal--regular, 12px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__content:first-child { padding-left: 12px; padding-left: var( --vkui--size_button_tertiary_medium_padding_horizontal--regular, 12px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__after, .vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__content:last-child { padding-right: 12px; padding-right: var( --vkui--size_button_tertiary_medium_padding_horizontal--regular, 12px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__content:first-child { padding-left: 16px; padding-left: var( --vkui--size_button_tertiary_large_padding_horizontal--regular, 16px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__after, .vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__content:last-child { padding-right: 16px; padding-right: var( --vkui--size_button_tertiary_large_padding_horizontal--regular, 16px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-s .vkuiButton__before { padding-left: 8px; padding-left: var( --vkui--size_button_tertiary_small_padding_horizontal_icon--regular, 8px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-m .vkuiButton__before { padding-left: 8px; padding-left: var( --vkui--size_button_tertiary_medium_padding_horizontal_icon--regular, 8px ); } .vkuiButton--lvl-tertiary.vkuiButton--sz-l .vkuiButton__before { padding-left: 12px; padding-left: var( --vkui--size_button_tertiary_large_padding_horizontal_icon--regular, 12px ); } .vkuiButton--lvl-tertiary.vkuiButton--singleIcon .vkuiButton__after, .vkuiButton--lvl-tertiary.vkuiButton--singleIcon .vkuiButton__before, .vkuiButton--singleIcon .vkuiButton__after, .vkuiButton--singleIcon .vkuiButton__before { margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } .vkuiButton__spinner { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .vkuiButton__spinner + .vkuiButton__in { visibility: hidden; } .vkuiButton--lvl-primary.vkuiButton--clr-accent { background-color: #2d81e0; background-color: var( --button_primary_background, var(--vkui--color_background_accent) ); } .vkuiButton--lvl-primary.vkuiButton--clr-accent.vkuiButton--hover { background-color: #2483e4; background-color: var(--vkui--color_background_accent--hover, #2483e4); } .vkuiButton--lvl-primary.vkuiButton--clr-accent.vkuiButton--active { background-color: #237edd; background-color: var(--vkui--color_background_accent--active, #237edd); } .vkuiButton--lvl-primary.vkuiButton--clr-positive { background-color: #4bb34b; background-color: var( --button_commerce_background, var(--vkui--color_background_positive) ); } .vkuiButton--lvl-primary.vkuiButton--clr-positive.vkuiButton--hover { background-color: #48ac4a; background-color: var(--vkui--color_background_positive--hover, #48ac4a); } .vkuiButton--lvl-primary.vkuiButton--clr-positive.vkuiButton--active { background-color: #45a64a; background-color: var(--vkui--color_background_positive--active, #45a64a); } .vkuiButton--lvl-primary.vkuiButton--clr-negative { background-color: #e64646; background-color: var(--destructive, var(--vkui--color_background_negative)); } .vkuiButton--lvl-primary.vkuiButton--clr-negative.vkuiButton--hover { background-color: #dd4446; background-color: var(--vkui--color_background_negative--hover, #dd4446); } .vkuiButton--lvl-primary.vkuiButton--clr-negative.vkuiButton--active { background-color: #d44245; background-color: var(--vkui--color_background_negative--active, #d44245); } .vkuiButton--lvl-primary.vkuiButton--clr-neutral { background-color: #f5f5f5; background-color: var( --content_tint_background, var(--vkui--color_background_secondary) ); } .vkuiButton--lvl-primary.vkuiButton--clr-neutral.vkuiButton--hover { background-color: #ebecee; background-color: var(--vkui--color_background_secondary--hover, #ebecee); } .vkuiButton--lvl-primary.vkuiButton--clr-neutral.vkuiButton--active { background-color: #e1e3e6; background-color: var(--vkui--color_background_secondary--active, #e1e3e6); } .vkuiButton--lvl-secondary { background-color: rgba(0, 28, 61, 0.05); background-color: var( --button_secondary_background, var(--vkui--color_background_secondary) ); } .vkuiButton--lvl-secondary.vkuiButton--hover { background-color: #ebecee; background-color: var(--vkui--color_background_secondary--hover, #ebecee); } .vkuiButton--lvl-secondary.vkuiButton--active { background-color: #e1e3e6; background-color: var(--vkui--color_background_secondary--active, #e1e3e6); } .vkuiButton--lvl-outline, .vkuiButton--lvl-tertiary { background-color: initial; background-color: var( --button_tertiary_background, var(--vkui--color_transparent) ); } .vkuiButton--lvl-outline.vkuiButton--hover, .vkuiButton--lvl-tertiary.vkuiButton--hover { background-color: rgba(0, 16, 61, 0.04); background-color: var( --vkui--color_transparent--hover, rgba(0, 16, 61, 0.04) ); } .vkuiButton--lvl-outline.vkuiButton--active, .vkuiButton--lvl-tertiary.vkuiButton--active { background-color: rgba(0, 16, 61, 0.08); background-color: var( --vkui--color_transparent--active, rgba(0, 16, 61, 0.08) ); } .vkuiButton--lvl-primary.vkuiButton--clr-accent { color: #fff; color: var(--button_primary_foreground, var(--vkui--color_text_contrast)); } .vkuiButton--lvl-primary.vkuiButton--clr-negative { color: #fff; color: var(--white, var(--vkui--color_text_contrast)); } .vkuiButton--lvl-primary.vkuiButton--clr-positive { color: #fff; color: var(--button_commerce_foreground, var(--vkui--color_text_contrast)); } .vkuiButton--lvl-primary.vkuiButton--clr-accent.vkuiButton--hover, .vkuiButton--lvl-primary.vkuiButton--clr-negative.vkuiButton--hover, .vkuiButton--lvl-primary.vkuiButton--clr-positive.vkuiButton--hover { color: #f5f5f7; color: var(--vkui--color_text_contrast--hover, #f5f5f7); } .vkuiButton--lvl-primary.vkuiButton--clr-accent.vkuiButton--active, .vkuiButton--lvl-primary.vkuiButton--clr-negative.vkuiButton--active, .vkuiButton--lvl-primary.vkuiButton--clr-positive.vkuiButton--active { color: #ebecef; color: var(--vkui--color_text_contrast--active, #ebecef); } .vkuiButton--lvl-tertiary.vkuiButton--clr-accent { color: #2d81e0; color: var(--button_tertiary_foreground, var(--vkui--color_text_accent)); } .vkuiButton--lvl-secondary.vkuiButton--clr-accent { color: #2688eb; color: var(--button_secondary_foreground, var(--vkui--color_text_accent)); } .vkuiButton--lvl-outline.vkuiButton--clr-accent { color: #2688eb; color: var(--button_outline_foreground, var(--vkui--color_text_accent)); } .vkuiButton--lvl-outline.vkuiButton--clr-accent.vkuiButton--hover, .vkuiButton--lvl-secondary.vkuiButton--clr-accent.vkuiButton--hover, .vkuiButton--lvl-tertiary.vkuiButton--clr-accent.vkuiButton--hover { color: #2483e4; color: var(--vkui--color_text_accent--hover, #2483e4); } .vkuiButton--lvl-outline.vkuiButton--clr-accent.vkuiButton--active, .vkuiButton--lvl-secondary.vkuiButton--clr-accent.vkuiButton--active, .vkuiButton--lvl-tertiary.vkuiButton--clr-accent.vkuiButton--active { color: #237edd; color: var(--vkui--color_text_accent--active, #237edd); } .vkuiButton--lvl-outline.vkuiButton--clr-positive, .vkuiButton--lvl-secondary.vkuiButton--clr-positive, .vkuiButton--lvl-tertiary.vkuiButton--clr-positive { color: #4bb34b; color: var(--button_commerce_background, var(--vkui--color_text_positive)); } .vkuiButton--lvl-outline.vkuiButton--clr-positive.vkuiButton--hover, .vkuiButton--lvl-secondary.vkuiButton--clr-positive.vkuiButton--hover, .vkuiButton--lvl-tertiary.vkuiButton--clr-positive.vkuiButton--hover { color: #48ac4a; color: var(--vkui--color_text_positive--hover, #48ac4a); } .vkuiButton--lvl-outline.vkuiButton--clr-positive.vkuiButton--active, .vkuiButton--lvl-secondary.vkuiButton--clr-positive.vkuiButton--active, .vkuiButton--lvl-tertiary.vkuiButton--clr-positive.vkuiButton--active { color: #45a64a; color: var(--vkui--color_text_positive--active, #45a64a); } .vkuiButton--lvl-outline.vkuiButton--clr-negative, .vkuiButton--lvl-secondary.vkuiButton--clr-negative, .vkuiButton--lvl-tertiary.vkuiButton--clr-negative { color: #e64646; color: var(--destructive, var(--vkui--color_text_negative)); } .vkuiButton--lvl-outline.vkuiButton--clr-negative.vkuiButton--hover, .vkuiButton--lvl-secondary.vkuiButton--clr-negative.vkuiButton--hover, .vkuiButton--lvl-tertiary.vkuiButton--clr-negative.vkuiButton--hover { color: #dd4446; color: var(--vkui--color_text_negative--hover, #dd4446); } .vkuiButton--lvl-outline.vkuiButton--clr-negative.vkuiButton--active, .vkuiButton--lvl-secondary.vkuiButton--clr-negative.vkuiButton--active, .vkuiButton--lvl-tertiary.vkuiButton--clr-negative.vkuiButton--active { color: #d44245; color: var(--vkui--color_text_negative--active, #d44245); } .vkuiButton--lvl-outline.vkuiButton--clr-neutral, .vkuiButton--lvl-primary.vkuiButton--clr-neutral, .vkuiButton--lvl-secondary.vkuiButton--clr-neutral, .vkuiButton--lvl-tertiary.vkuiButton--clr-neutral { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiButton--lvl-outline.vkuiButton--clr-neutral.vkuiButton--hover, .vkuiButton--lvl-primary.vkuiButton--clr-neutral.vkuiButton--hover, .vkuiButton--lvl-secondary.vkuiButton--clr-neutral.vkuiButton--hover, .vkuiButton--lvl-tertiary.vkuiButton--clr-neutral.vkuiButton--hover { color: #000102; color: var(--vkui--color_text_primary--hover, #000102); } .vkuiButton--lvl-outline.vkuiButton--clr-neutral.vkuiButton--active, .vkuiButton--lvl-primary.vkuiButton--clr-neutral.vkuiButton--active, .vkuiButton--lvl-secondary.vkuiButton--clr-neutral.vkuiButton--active, .vkuiButton--lvl-tertiary.vkuiButton--clr-neutral.vkuiButton--active { color: #000105; color: var(--vkui--color_text_primary--active, #000105); } .vkuiButton--lvl-outline.vkuiButton--clr-accent { box-shadow: inset 0 0 0 1px #2688eb; box-shadow: inset 0 0 0 1px var(--button_outline_border, var(--vkui--color_stroke_accent)); } .vkuiButton--lvl-outline.vkuiButton--clr-accent.vkuiButton--hover { box-shadow: inset 0 0 0 1px #2483e4; box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_accent--hover, #2483e4); } .vkuiButton--lvl-outline.vkuiButton--clr-accent.vkuiButton--active { box-shadow: inset 0 0 0 1px #237edd; box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_accent--active, #237edd); } .vkuiButton--lvl-outline.vkuiButton--clr-positive { box-shadow: inset 0 0 0 1px #4bb34b; box-shadow: inset 0 0 0 1px var(--button_commerce_background, var(--vkui--color_stroke_positive)); } .vkuiButton--lvl-outline.vkuiButton--clr-positive.vkuiButton--hover { box-shadow: inset 0 0 0 1px #48ac4a; box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_positive--hover, #48ac4a); } .vkuiButton--lvl-outline.vkuiButton--clr-positive.vkuiButton--active { box-shadow: inset 0 0 0 1px #45a64a; box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_positive--active, #45a64a); } .vkuiButton--lvl-outline.vkuiButton--clr-negative { box-shadow: inset 0 0 0 1px #e64646; box-shadow: inset 0 0 0 1px var(--destructive, var(--vkui--color_stroke_negative)); } .vkuiButton--lvl-outline.vkuiButton--clr-negative.vkuiButton--hover { box-shadow: inset 0 0 0 1px #dd4446; box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_negative--hover, #dd4446); } .vkuiButton--lvl-outline.vkuiButton--clr-negative.vkuiButton--active { box-shadow: inset 0 0 0 1px #d44245; box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_negative--active, #d44245); } .vkuiButton--lvl-outline.vkuiButton--clr-neutral { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 0 1px var(--field_border, var(--vkui--color_field_border_alpha)); } .vkuiButton--lvl-outline.vkuiButton--clr-neutral.vkuiButton--hover { background-color: #ebecee; background-color: var(--vkui--color_background_secondary--hover, #ebecee); box-shadow: none; } .vkuiButton--lvl-outline.vkuiButton--clr-neutral.vkuiButton--active { background-color: #e1e3e6; background-color: var(--vkui--color_background_secondary--active, #e1e3e6); box-shadow: none; } .vkuiButton--lvl-primary.vkuiButton--clr-overlay { background-color: #fff; background-color: var( --media_overlay_button_background, var(--vkui--color_background_contrast) ); } .vkuiButton--lvl-primary.vkuiButton--clr-overlay.vkuiButton--hover { background-color: #f5f5f7; background-color: var(--vkui--color_background_contrast--hover, #f5f5f7); } .vkuiButton--lvl-primary.vkuiButton--clr-overlay.vkuiButton--active { background-color: #ebecef; background-color: var(--vkui--color_background_contrast--active, #ebecef); } .vkuiButton--lvl-secondary.vkuiButton--clr-overlay { background-color: hsla(0, 0%, 100%, 0.2); background-color: var( --vkui--color_background_contrast_secondary_alpha, hsla(0, 0%, 100%, 0.2) ); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--hover, .vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--hover, .vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--hover { background-color: hsla(0, 0%, 100%, 0.24); background-color: var( --vkui--color_background_contrast_secondary_alpha--hover, hsla(0, 0%, 100%, 0.24) ); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--active, .vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--active, .vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--active { background-color: hsla(0, 0%, 100%, 0.28); background-color: var( --vkui--color_background_contrast_secondary_alpha--active, hsla(0, 0%, 100%, 0.28) ); } .vkuiButton--lvl-primary.vkuiButton--clr-overlay { color: #2c2d2e; color: var( --media_overlay_button_foreground, var(--vkui--color_text_primary_invariably) ); } .vkuiButton--lvl-primary.vkuiButton--clr-overlay.vkuiButton--hover { color: #000102; color: var(--vkui--color_text_primary_invariably--hover, #000102); } .vkuiButton--lvl-primary.vkuiButton--clr-overlay.vkuiButton--active { color: #000105; color: var(--vkui--color_text_primary_invariably--active, #000105); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay, .vkuiButton--lvl-secondary.vkuiButton--clr-overlay, .vkuiButton--lvl-tertiary.vkuiButton--clr-overlay { color: #fff; color: var(--white, var(--vkui--color_text_contrast)); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--hover, .vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--hover, .vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--hover { color: #f5f5f7; color: var(--vkui--color_text_contrast--hover, #f5f5f7); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--active, .vkuiButton--lvl-secondary.vkuiButton--clr-overlay.vkuiButton--active, .vkuiButton--lvl-tertiary.vkuiButton--clr-overlay.vkuiButton--active { color: #ebecef; color: var(--vkui--color_text_contrast--active, #ebecef); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay { box-shadow: inset 0 0 0 1px #fff; box-shadow: inset 0 0 0 1px var(--white, var(--vkui--color_stroke_contrast)); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--hover { box-shadow: inset 0 0 0 1px #f5f5f7; box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_contrast--hover, #f5f5f7); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay.vkuiButton--active { box-shadow: inset 0 0 0 1px #ebecef; box-shadow: inset 0 0 0 1px var(--vkui--color_stroke_contrast--active, #ebecef); } .vkuiButton__after:not(:first-child), .vkuiButton__before:not(:last-child) + .vkuiButton__content { margin-left: 6px; } .vkuiButton--sz-l .vkuiButton__after:not(:first-child), .vkuiButton--sz-l .vkuiButton__before:not(:last-child) + .vkuiButton__content { margin-left: 8px; } .vkuiButton--sz-m { min-height: 32px; min-height: var(--vkui--size_button_medium_height--compact, 32px); } .vkuiButton--sz-m.vkuiButton--singleIcon { width: 32px; width: var(--vkui--size_button_medium_height--compact, 32px); } .vkuiButton--sz-l { min-height: 36px; min-height: var(--vkui--size_button_large_height--compact, 36px); } .vkuiButton--sz-l.vkuiButton--singleIcon { width: 36px; width: var(--vkui--size_button_large_height--compact, 36px); } .vkuiButton--sizeY-regular { min-height: 30px; min-height: var(--vkui--size_button_small_height--regular, 30px); } .vkuiButton--sizeY-regular.vkuiButton--singleIcon { width: 30px; width: var(--vkui--size_button_small_height--regular, 30px); } .vkuiButton--sizeY-regular.vkuiButton--sz-m { min-height: 36px; min-height: var(--vkui--size_button_medium_height--regular, 36px); } .vkuiButton--sizeY-regular.vkuiButton--sz-l.vkuiButton--singleIcon { width: 36px; width: var(--vkui--size_button_medium_height--regular, 36px); } .vkuiButton--sizeY-regular.vkuiButton--sz-l { min-height: 44px; min-height: var(--vkui--size_button_large_height--regular, 44px); } .vkuiButton--sizeY-regular.vkuiButton--sz-l.vkuiButton--singleIcon { width: 44px; width: var(--vkui--size_button_large_height--regular, 44px); } .vkuiBanner__actions > .vkuiButton { margin-bottom: 6px; margin-right: 16px; margin-top: 12px; } .vkuiBanner__actions > .vkuiButton--lvl-tertiary { margin: 4px 16px 2px -12px; margin: 4px 16px 2px calc( var(--vkui--size_button_tertiary_small_padding_horizontal--regular, 12px) * -1 ); } .vkuiBanner__actions > .vkuiButton--sz-m.vkuiButton--lvl-tertiary { margin-left: -12px; margin-left: calc( var(--vkui--size_button_tertiary_medium_padding_horizontal--regular, 12px) * -1 ); } .vkuiBanner__actions > .vkuiButton--sz-l.vkuiButton--lvl-tertiary { margin-left: -16px; margin-left: calc( var(--vkui--size_button_tertiary_large_padding_horizontal--regular, 16px) * -1 ); } .vkuiBanner__actions > .vkuiButton--lvl-tertiary:first-child { margin-top: 4px; } .vkuiBanner__actions > .vkuiButton:not(.vkuiButton--lvl-tertiary) + .vkuiButton:not(.vkuiButton--lvl-tertiary) { margin-top: 0; } .vkuiBanner__actions > .vkuiButton:not(.vkuiButton--lvl-tertiary) + .vkuiButton--lvl-tertiary { margin-left: -12px; margin-top: 2px; } .vkuiBanner__actions > .vkuiButton--lvl-tertiary + .vkuiButton--lvl-tertiary { margin-top: 2px; } .vkuiModalCardBase__actions .vkuiButton { flex: 1 1; margin-left: 6px; margin-right: 6px; width: 0; } .vkuiModalCardBase__actions--v .vkuiButton { margin-left: 0; margin-right: 0; width: 100%; } .vkuiModalCardBase__actions--v .vkuiButton + .vkuiButton { margin-top: 12px; } .vkuiRichCell__actions > .vkuiButton + .vkuiButton { margin-left: 8px; } .vkuiRemovable__content { align-items: center; display: flex; padding-left: 16px; padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px); position: relative; } .vkuiRemovable__action { border: none; flex-grow: 0; flex-shrink: 0; position: relative; } .vkuiRemovable__action.vkuiRemovable__action { color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); } .vkuiRemovable--start .vkuiRemovable__action { align-self: flex-start; } .vkuiRemovable--ios { overflow: hidden; } .vkuiRemovable__remove { background-color: #e64646; background-color: var(--destructive, var(--vkui--color_background_negative)); border: none; border-radius: 0; color: #fff; color: var(--white); font-size: 15px; height: 100%; left: 100%; line-height: 45px; padding: 0 10px; position: absolute; top: 0; } .vkuiRemovable__remove-in { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } @media (prefers-reduced-motion: no-preference) { .vkuiRemovable--ios .vkuiRemovable__content { transition: -webkit-transform 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.6s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.6s var(--ios-easing); transition: transform 0.6s var(--ios-easing); transition: transform 0.6s var(--ios-easing), -webkit-transform 0.6s var(--ios-easing); } } .vkuiRemovable__toggle { background: none; display: block; height: 44px; margin: 0 2px; width: 44px; } .vkuiRemovable__toggle-in { align-content: center; align-items: center; border: none; display: flex; height: 100%; justify-content: center; position: relative; width: 100%; } .vkuiRemovable__toggle-in:after { background-color: #e64646; background-color: var(--destructive, var(--vkui--color_background_negative)); border-radius: 50%; content: ""; height: 22px; width: 22px; } .vkuiRemovable__toggle-in:before { background-color: #fff; background-color: var(--white); content: ""; display: block; height: 2px; position: absolute; width: 12px; } .vkuiRemovable--ios .vkuiRemovable__content { padding-left: 0; padding-right: 16px; padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiFormItem--removable .vkuiRemovable__content, .vkuiFormLayoutGroup--removable .vkuiRemovable__content { align-items: flex-start; flex-wrap: wrap; } .vkuiRemovable__offset { display: none; } .vkuiFormItem--withTop .vkuiFormItem__removable ~ .vkuiRemovable__offset, .vkuiFormLayoutGroup--removable .vkuiFormItem--withTop ~ .vkuiRemovable__offset { display: block; height: 28px; height: calc(10px + var(--vkui--font_subhead--line_height--regular, 18px)); order: -1; width: 100%; } .vkuiFormItem--withTop.vkuiFormItem--sizeY-compact .vkuiFormItem__removable ~ .vkuiRemovable__offset, .vkuiFormLayoutGroup--removable.vkuiFormLayoutGroup--sizeY-compact .vkuiFormItem--withTop ~ .vkuiRemovable__offset { height: 24px; height: calc(8px + var(--vkui--font_subhead--line_height--compact, 16px)); } [class$="--focus-visible"] > .vkuiFocusVisible { border-radius: inherit; bottom: 2px; box-shadow: 0 0 0 2px #2688eb; box-shadow: 0 0 0 2px var(--accent, var(--vkui--color_stroke_accent)); left: 2px; overflow: hidden; pointer-events: none; position: absolute; right: 2px; top: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 0; } [class$="--focus-visible"] > .vkuiFocusVisible--outside { bottom: -2px; left: -2px; right: -2px; top: -2px; } @media (prefers-reduced-motion: no-preference) { [class$="--focus-visible"] > .vkuiFocusVisible { -webkit-animation: vkui-animation-focus-visible 0.15s ease-in-out forwards; animation: vkui-animation-focus-visible 0.15s ease-in-out forwards; -webkit-animation-delay: 0.01ms; animation-delay: 0.01ms; bottom: 4px; left: 4px; right: 4px; top: 4px; will-change: top, left, bottom, right; } [class$="--focus-visible"] > .vkuiFocusVisible--outside { -webkit-animation-name: vkui-animation-focus-visible-outside; animation-name: vkui-animation-focus-visible-outside; bottom: 0; left: 0; right: 0; top: 0; } @-webkit-keyframes vkui-animation-focus-visible { to { bottom: 2px; left: 2px; right: 2px; top: 2px; will-change: auto; } } @keyframes vkui-animation-focus-visible { to { bottom: 2px; left: 2px; right: 2px; top: 2px; will-change: auto; } } @-webkit-keyframes vkui-animation-focus-visible-outside { to { bottom: -2px; left: -2px; right: -2px; top: -2px; will-change: auto; } } @keyframes vkui-animation-focus-visible-outside { to { bottom: -2px; left: -2px; right: -2px; top: -2px; will-change: auto; } } } .vkuiPopperArrow__in { content: ""; display: block; height: 8px; width: 20px; } [data-popper-placement^="bottom"] .vkuiPopperArrow { bottom: 100%; } [data-popper-placement^="top"] .vkuiPopperArrow { top: 100%; } [data-popper-placement^="top"] .vkuiPopperArrow__in { -webkit-transform: rotate(180deg); transform: rotate(180deg); } [data-popper-placement^="left"] .vkuiPopperArrow { left: calc(100% - 6px); } [data-popper-placement^="left"] .vkuiPopperArrow__in { -webkit-transform: rotate(90deg); transform: rotate(90deg); } [data-popper-placement^="right"] .vkuiPopperArrow { right: calc(100% - 6px); } [data-popper-placement^="right"] .vkuiPopperArrow__in { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .vkuiRoot { height: 100%; position: relative; width: 100%; } .vkuiRoot--transition { pointer-events: none; } .vkuiRoot__view { height: 100%; position: relative; width: 100%; } .vkuiRoot--transition .vkuiRoot__view { left: 0; overflow: hidden; position: fixed; top: 0; } .vkuiRoot__scrollCompensation { height: 100%; width: 100%; } .vkuiRoot__view--hide-forward, .vkuiRoot__view--show-back { z-index: 1; } .vkuiRoot__view--hide-back, .vkuiRoot__view--show-forward { z-index: 2; } .vkuiRoot__view--show-forward { -webkit-animation: vkui-root-android-animation-show-forward 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: vkui-root-android-animation-show-forward 0.3s cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation: vkui-root-android-animation-show-forward 0.3s var(--android-easing); animation: vkui-root-android-animation-show-forward 0.3s var(--android-easing); } .vkuiRoot__view--hide-back { -webkit-animation: vkui-root-android-animation-hide-back 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: vkui-root-android-animation-hide-back 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; -webkit-animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing) forwards; animation: vkui-root-android-animation-hide-back 0.3s var(--android-easing) forwards; } .vkuiRoot__popout { z-index: 100; z-index: var(--vkui--z_index_popout, 100); } .vkuiRoot__modal, .vkuiRoot__popout { height: 100%; left: 0; position: fixed; top: 0; width: 100%; } .vkuiRoot__modal { z-index: 99; z-index: var(--vkui--z_index_modal, 99); } .vkuiRoot__modal:empty { display: none; } .vkuiRoot--ios .vkuiRoot__view--hide-forward:after, .vkuiRoot--ios .vkuiRoot__view--show-back:after { background-color: #000; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 6; } .vkuiRoot--ios .vkuiRoot__view--show-back:after { -webkit-animation: vkui-root-ios-animation-show-back 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards; animation: vkui-root-ios-animation-show-back 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards; -webkit-animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing) forwards; animation: vkui-root-ios-animation-show-back 0.6s var(--ios-easing) forwards; } .vkuiRoot--ios .vkuiRoot__view--hide-forward:after { -webkit-animation: vkui-root-ios-animation-hide-forward 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-root-ios-animation-hide-forward 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-root-ios-animation-hide-forward 0.6s var(--ios-easing); animation: vkui-root-ios-animation-hide-forward 0.6s var(--ios-easing); } .vkuiRoot--ios .vkuiRoot__view--show-forward { -webkit-animation: vkui-root-ios-animation-show-forward 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-root-ios-animation-show-forward 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-root-ios-animation-show-forward 0.6s var(--ios-easing); animation: vkui-root-ios-animation-show-forward 0.6s var(--ios-easing); } .vkuiRoot--ios .vkuiRoot__view--hide-back { -webkit-animation: vkui-root-ios-animation-hide-back 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards; animation: vkui-root-ios-animation-hide-back 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards; -webkit-animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing) forwards; animation: vkui-root-ios-animation-hide-back 0.6s var(--ios-easing) forwards; } @-webkit-keyframes vkui-root-ios-animation-show-back { 0% { opacity: 0.3; } to { opacity: 0; } } @keyframes vkui-root-ios-animation-show-back { 0% { opacity: 0.3; } to { opacity: 0; } } @-webkit-keyframes vkui-root-ios-animation-hide-forward { 0% { opacity: 0; } to { opacity: 0.3; } } @keyframes vkui-root-ios-animation-hide-forward { 0% { opacity: 0; } to { opacity: 0.3; } } @-webkit-keyframes vkui-root-ios-animation-hide-back { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes vkui-root-ios-animation-hide-back { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @-webkit-keyframes vkui-root-ios-animation-show-forward { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes vkui-root-ios-animation-show-forward { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes vkui-root-android-animation-hide-back { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } to { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); } } @keyframes vkui-root-android-animation-hide-back { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } to { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); } } @-webkit-keyframes vkui-root-android-animation-show-forward { 0% { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes vkui-root-android-animation-show-forward { 0% { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .vkuiView--ios .vkuiPanel__in { padding: 0; padding: 0 var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left); } .vkuiView--ios .vkuiView__panel--swipe-back-prev { box-shadow: -2px 0 12px rgba(0, 0, 0, 0.3); } .vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-success { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); transition: -webkit-transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.3s var(--ios-easing); transition: transform 0.3s var(--ios-easing); transition: transform 0.3s var(--ios-easing), -webkit-transform 0.3s var(--ios-easing); } .vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-success, .vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-failed { -webkit-transform: translateZ(0); transform: translateZ(0); } .vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-failed, .vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-success, .vkuiView--ios .vkuiView__panel--swipe-back-prev.vkuiView__panel--swipe-back-failed { transition: -webkit-transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.3s var(--ios-easing); transition: transform 0.3s var(--ios-easing); transition: transform 0.3s var(--ios-easing), -webkit-transform 0.3s var(--ios-easing); } .vkuiView--ios .vkuiView__panel--swipe-back-next.vkuiView__panel--swipe-back-failed { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .vkuiView--ios .vkuiView__panel--prev { -webkit-animation: vkui-animation-ios-prev-forward 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-animation-ios-prev-forward 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-animation-ios-prev-forward 0.6s var(--ios-easing); animation: vkui-animation-ios-prev-forward 0.6s var(--ios-easing); } .vkuiView--ios .vkuiView__panel--next { -webkit-animation: vkui-animation-ios-next-back 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-animation-ios-next-back 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-animation-ios-next-back 0.6s var(--ios-easing); animation: vkui-animation-ios-next-back 0.6s var(--ios-easing); } .vkuiView--ios .vkuiView__panel--prev ~ .vkuiView__panel--next { -webkit-animation: vkui-animation-ios-next-forward 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-animation-ios-next-forward 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-animation-ios-next-forward 0.6s var(--ios-easing); animation: vkui-animation-ios-next-forward 0.6s var(--ios-easing); } .vkuiView--ios .vkuiView__panel--next ~ .vkuiView__panel--prev { -webkit-animation: vkui-animation-ios-prev-back 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards; animation: vkui-animation-ios-prev-back 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards; -webkit-animation: vkui-animation-ios-prev-back 0.6s var(--ios-easing) forwards; animation: vkui-animation-ios-prev-back 0.6s var(--ios-easing) forwards; } .vkuiView--ios .vkuiView__panel--next .vkuiPanel__fade, .vkuiView--ios .vkuiView__panel--prev .vkuiPanel__fade { background: #000; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 10; } .vkuiView--ios .vkuiView__panel--prev .vkuiPanel__fade { -webkit-animation: vkui-animation-ios-fade-in 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-animation-ios-fade-in 0.6s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-animation-ios-fade-in 0.6s var(--ios-easing); animation: vkui-animation-ios-fade-in 0.6s var(--ios-easing); } .vkuiView--ios .vkuiView__panel--next .vkuiPanel__fade { -webkit-animation: vkui-animation-ios-fade-out 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards; animation: vkui-animation-ios-fade-out 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) forwards; -webkit-animation: vkui-animation-ios-fade-out 0.6s var(--ios-easing) forwards; animation: vkui-animation-ios-fade-out 0.6s var(--ios-easing) forwards; } .vkuiView--ios .vkuiView__panel--next ~ .vkuiView__panel--prev .vkuiPanel__fade, .vkuiView--ios .vkuiView__panel--prev ~ .vkuiView__panel--next .vkuiPanel__fade { display: none; } .vkuiView--ios.vkuiView--no-motion .vkuiView__panel, .vkuiView--ios.vkuiView--no-motion .vkuiView__panel .vkuiPanel__in { -webkit-animation: none; animation: none; } .vkuiView--ios .vkuiView__panel--active .vkuiPanel__fade { display: none; } @-webkit-keyframes vkui-animation-ios-next-back { 0% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes vkui-animation-ios-next-back { 0% { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes vkui-animation-ios-fade-in { 0% { opacity: 0; } to { opacity: 0.3; } } @keyframes vkui-animation-ios-fade-in { 0% { opacity: 0; } to { opacity: 0.3; } } @-webkit-keyframes vkui-animation-ios-fade-out { 0% { opacity: 0.3; } to { opacity: 0; } } @keyframes vkui-animation-ios-fade-out { 0% { opacity: 0.3; } to { opacity: 0; } } .vkuiView { word-wrap: break-word; font-family: -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-common); height: 100%; position: relative; width: 100%; } .vkuiView--animated, .vkuiView--swiping-back { overflow: hidden; } .vkuiView__header { position: fixed; width: 100%; z-index: 2; } .vkuiView--animated .vkuiView__header, .vkuiView--animated .vkuiView__panel, .vkuiView--swiping-back .vkuiView__header, .vkuiView--swiping-back .vkuiView__panel { pointer-events: none; } .vkuiView__panel, .vkuiView__panels { height: 100%; width: 100%; } .vkuiView__panel { box-sizing: border-box; position: relative; z-index: 1; } .vkuiView__panel-in { height: 100%; } .vkuiView--animated .vkuiView__panel, .vkuiView--swiping-back .vkuiView__panel { left: 0; overflow: hidden; position: fixed; top: 0; } .vkuiView__popout { z-index: 100; z-index: var(--vkui--z_index_popout, 100); } .vkuiView__modal, .vkuiView__popout { height: 100%; left: 0; position: fixed; top: 0; width: 100%; } .vkuiView__modal { z-index: 99; z-index: var(--vkui--z_index_modal, 99); } .vkuiView__modal:empty { display: none; } .vkuiView__panel--next ~ .vkuiView__panel--prev { -webkit-animation: vkui-animation-view-prev-back 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation: vkui-animation-view-prev-back 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; -webkit-animation: vkui-animation-view-prev-back 0.3s var(--android-easing) forwards; animation: vkui-animation-view-prev-back 0.3s var(--android-easing) forwards; } .vkuiView__panel--prev ~ .vkuiView__panel--next { -webkit-animation: vkui-animation-view-next-forward 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: vkui-animation-view-next-forward 0.3s cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation: vkui-animation-view-next-forward 0.3s var(--android-easing); animation: vkui-animation-view-next-forward 0.3s var(--android-easing); } .vkuiView--no-motion .vkuiView__panel { -webkit-animation: none; animation: none; } .vkuiPanel { height: 100%; position: relative; width: 100%; } .vkuiPanel:after { content: ""; height: 100%; z-index: 1; } .vkuiPanel--centered .vkuiPanelHeader, .vkuiPanel:after { left: 0; position: absolute; top: 0; width: 100%; } .vkuiPanel__in { box-sizing: border-box; display: flex; flex-direction: column; min-height: 100%; position: relative; width: 100%; z-index: 2; } .vkuiPanel__centered { align-items: center; box-sizing: border-box; display: flex; flex: 1 0; flex-direction: column; justify-content: center; } .vkuiPanel__centered .vkuiPanelHeader--vis + * { margin-top: 56px; margin-top: var( --panelheader_height, var(--vkui--size_panel_header_height--regular) ); } .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--vis + * { margin-top: 56px; margin-top: var( --panelheader_height_ios, var(--vkui--size_panel_header_height--regular) ); } .vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--sep + * { margin-top: 61px; margin-top: calc( var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) + 5px ); } .vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep + * { margin-top: 61px; margin-top: calc( var( --panelheader_height_ios, var(--vkui--size_panel_header_height--regular) ) + 5px ); } .vkuiPanel--sizeX-compact .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep + * { margin-top: 61px; margin-top: calc( var( --panelheader_height_vkcom, var(--vkui--size_panel_header_height--regular) ) + 5px ); } .vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--sep + * { margin-top: 72px; margin-top: calc( var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) + 16px ); } .vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--ios.vkuiPanelHeader--sep + * { margin-top: 72px; margin-top: calc( var( --panelheader_height_ios, var(--vkui--size_panel_header_height--regular) ) + 16px ); } .vkuiPanel--sizeX-regular .vkuiPanel__centered .vkuiPanelHeader--vkcom.vkuiPanelHeader--sep + * { margin-top: 72px; margin-top: calc( var( --panelheader_height_vkcom, var(--vkui--size_panel_header_height--regular) ) + 16px ); } .vkuiEpic .vkuiPanel__in { padding-bottom: 48px; padding-bottom: calc(var(--safe-area-inset-bottom) + var(--tabbar_height)); } .vkuiPanel__in-before { height: 1px; margin-bottom: -1px; } .vkuiPanel__separator { position: relative; z-index: 3; } .vkuiPanel__in-after { height: 1px; margin-top: -1px; } .vkuiPanel .vkuiPanel__in, .vkuiPanel:after { background-color: #fff; background-color: var( --background_content, var(--vkui--color_background_content) ); } .vkuiPanel.vkuiPanel--sizeX-regular .vkuiPanel__in, .vkuiPanel.vkuiPanel--sizeX-regular:after { background-color: initial; } .vkuiPanelHeader { position: relative; } .vkuiPanelHeader--vis.vkuiPanelHeader--fixed:before { content: ""; display: block; } .vkuiPanelHeader:not(.vkuiPanelHeader--vis):not(.vkuiPanelHeader--fixed) { height: 0; } .vkuiPanelHeader__fixed { z-index: 10; } .vkuiPanelHeader__in { align-items: center; background: #fff; background: var(--header_background, var(--vkui--color_background_content)); display: flex; justify-content: space-between; position: relative; white-space: nowrap; } .vkuiPanelHeader--trnsp .vkuiPanelHeader__in { background: transparent; } .vkuiPanelHeader--shadow .vkuiPanelHeader__in { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); } .vkuiPanelHeader__before { box-sizing: border-box; color: #2688eb; color: var(--header_tint, var(--vkui--color_icon_accent_themed)); display: flex; flex-shrink: 0; } .vkuiPanelHeader__content { overflow: hidden; } .vkuiPanelHeader__content > * { display: block; overflow: hidden; text-overflow: ellipsis; } .vkuiPanelHeader__content-in { color: #000; color: var(--header_text, var(--vkui--color_text_primary)); font-family: VK Sans Display, -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-display); font-weight: 500; } .vkuiPanelHeader:before, .vkuiPanelHeader__in { height: 56px; height: var( --panelheader_height, var(--vkui--size_panel_header_height--regular) ); padding-top: 0; padding-top: var(--safe-area-inset-top); } .vkuiPanelHeader__after { box-sizing: border-box; color: #2688eb; color: var(--header_tint, var(--vkui--color_icon_accent_themed)); display: flex; justify-content: flex-end; } .vkuiPanelHeader--vkapps .vkuiPanelHeader__after { min-width: 90px; } .vkuiPanelHeader--ios { --panelheader_height: var( --panelheader_height_ios, var(--vkui--size_panel_header_height--regular) ); } .vkuiPanelHeader--ios .vkuiPanelHeader__before { flex-basis: 0; flex-grow: 1; flex-shrink: 0; opacity: 1; padding: 4px 0 4px 4px; transition: opacity 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: opacity 0.3s var(--ios-easing); } .vkuiPanelHeader--ios .vkuiPanelHeader__before .vkuiPanelHeaderButton + .vkuiPanelHeaderButton--primitive { margin-left: -6px; padding-left: 0; } .vkuiPanelHeader--ios .vkuiPanelHeader__content { opacity: 1; text-align: center; transition: opacity 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: opacity 0.3s var(--ios-easing); } .vkuiPanelHeader--ios .vkuiPanelHeader__content-in { font-size: 21px; } .vkuiPanelHeader--ios .vkuiPanelHeader__content > * { padding: 0 4px; } .vkuiPanelHeader--ios.vkuiPanelHeader--no-before .vkuiPanelHeader__content { padding-left: 8px; } .vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content > * { padding-right: 0; } .vkuiPanelHeader--ios.vkuiPanelHeader--no-after .vkuiPanelHeader__content { padding-right: 8px; } .vkuiPanelHeader--ios .vkuiPanelHeader__after { flex-basis: 0; flex-grow: 1; flex-shrink: 0; opacity: 1; padding: 4px 4px 4px 0; transition: opacity 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: opacity 0.3s var(--ios-easing); } .vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__after, .vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__before, .vkuiView--ios .vkuiView__panel--prev .vkuiPanelHeader__content { opacity: 0; } .vkuiPanelHeader--android .vkuiPanelHeader__before:not(:empty) { padding: 4px 0 4px 4px; } .vkuiPanelHeader--android .vkuiPanelHeader__content { align-items: center; flex-grow: 1; max-width: 100%; } .vkuiPanelHeader--android .vkuiPanelHeader__content-in { font-size: 23px; } .vkuiPanelHeader--android .vkuiPanelHeader__content > * { padding: 0 12px; } .vkuiPanelHeader--android .vkuiSearch, .vkuiPanelHeader--vkcom .vkuiSearch { padding: 0 4px; } .vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-before:not( .vkuiModalPageHeader__in ) .vkuiPanelHeader__content { padding-left: 0; } .vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content > *, .vkuiPanelHeader--vkcom.vkuiPanelHeader--no-after .vkuiPanelHeader__content > * { padding-right: 0; } .vkuiPanelHeader--android.vkuiPanelHeader--no-after .vkuiPanelHeader__content { padding-right: 16px; } .vkuiPanelHeader--android.vkuiPanelHeader--no-before .vkuiPanelHeader__content { padding-left: 16px; } .vkuiSplitCol--spaced .vkuiPanelHeader--android.vkuiPanelHeader--no-after:not( .vkuiModalPageHeader__in ) .vkuiPanelHeader__content { padding-right: 0; } .vkuiPanelHeader--android .vkuiPanelHeader__after:not(:empty), .vkuiPanelHeader--vkcom .vkuiPanelHeader__after:not(:empty) { padding: 4px 4px 4px 0; } .vkuiPanelHeader--vkcom { --panelheader_height: var( --panelheader_height_vkcom, var(--vkui--size_panel_header_height--regular) ); position: relative; z-index: 10; } .vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not( .vkuiModalPageHeader__in ):after, .vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not( .vkuiPanelHeader--sep ) .vkuiPanelHeader__in:after { background-color: #fff; background-color: var( --header_background, var(--vkui--color_background_content) ); bottom: 0; content: ""; height: 1px; height: var(--thin-border); left: 1px; left: var(--thin-border); position: absolute; right: 1px; right: var(--thin-border); } .vkuiPanelHeader--vkcom.vkuiPanelHeader--sizeX-regular:not( .vkuiModalPageHeader__in ) .vkuiPanelHeader__in { border-bottom: none; border-top-left-radius: 8px; border-top-right-radius: 8px; box-shadow: inset 0 0 0 1px #e1e3e6; box-shadow: 0 0 0 var(--thin-border) #e1e3e6 inset; box-shadow: 0 0 0 var(--thin-border) var(--input_border) inset; } .vkuiPanelHeader--vkcom .vkuiPanelHeader__content { text-align: center; } .vkuiPanelHeader--vkcom .vkuiPanelHeader__before:not(:empty) { padding: 0 0 0 4px; } .vkuiPanelHeader--vkcom .vkuiPanelHeader__after, .vkuiPanelHeader--vkcom .vkuiPanelHeader__before { flex-basis: 0; flex-grow: 1; flex-shrink: 0; } .vkuiPanelHeader--no-before .vkuiPanelHeader__content > * { padding-left: 0; } .vkuiPanelHeaderButton { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; box-shadow: none; color: currentColor; display: block; margin: 0; padding: 0; position: relative; } .vkuiPanelHeaderButton[disabled] { opacity: 0.6; } .vkuiPanelHeaderButton .vkuiCounter { padding: 0; position: absolute; right: 2px; top: 8px; } .vkuiPanelHeaderButton--primitive { height: 48px; line-height: 48px; padding: 0 12px; } .vkuiPanelHeaderButton--ios { align-items: center; display: flex; font-size: 17px; position: relative; } .vkuiPanelHeaderButton--ios.vkuiPanelHeaderButton--primitive { height: 44px; line-height: 44px; } .vkuiPanelHeaderButton--ios .vkuiIcon--24 { padding: 10px; } .vkuiPanelHeaderButton--ios .vkuiIcon--28 { padding: 8px; } .vkuiPanelHeaderButton--android.vkuiPanelHeaderButton--notPrimitive { border-radius: 50%; } .vkuiPanelHeaderButton--android .vkuiIcon--24 { padding: 12px; } .vkuiPanelHeaderButton--android .vkuiIcon--28 { padding: 10px; } .vkuiPanelHeaderButton--vkcom { color: #818c99; color: var(--header_text_secondary, var(--vkui--color_text_secondary)); } .vkuiPanelHeaderButton--vkcom > :not(.vkuiCounter) { opacity: 0.7; transition: opacity 0.3s; } .vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--active > :not(.vkuiCounter), .vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--hover > :not(.vkuiCounter) { opacity: 1; } .vkuiPanelHeaderButton--vkcom { align-items: center; display: flex; padding: 10px; } .vkuiPanelHeaderButton--vkcom.vkuiPanelHeaderButton--notPrimitive { border-radius: 50%; } .vkuiPanelHeaderBack--vkcom.vkuiPanelHeaderBack--has-label { padding-right: 11px; } .vkuiPanelHeaderBack--ios.vkuiPanelHeaderBack--has-label { padding-right: 8px; } .vkuiPanelHeaderContent { align-items: center; box-sizing: border-box; display: flex; font-family: -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-common); height: 100%; justify-content: flex-start; line-height: normal; max-width: 100%; } .vkuiPanelHeaderContent__before { flex-shrink: 0; margin-right: 12px; } .vkuiPanelHeaderContent__in { align-items: flex-start; display: flex; flex-direction: column; flex-grow: 1; height: 100%; justify-content: center; min-width: 0; } .vkuiPanelHeaderContent__children-in, .vkuiPanelHeaderContent__status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiPanelHeaderContent__status { color: #818c99; color: var(--header_text_secondary, var(--vkui--color_text_secondary)); margin-top: 1px; max-width: 100%; order: 1; } .vkuiPanelHeaderContent__children { align-items: center; display: flex; max-width: 100%; } .vkuiPanelHeaderContent__children-in { flex-grow: 0; min-width: 0; } .vkuiPanelHeaderContent__aside { align-items: center; color: #2688eb; color: var(--header_tint, var(--vkui--color_icon_accent)); display: flex; justify-content: flex-start; margin-left: 2px; } .vkuiPanelHeaderContent__width { width: 1000px; } .vkuiPanelHeaderContent__in--centered { align-items: center; } .vkuiPanelHeaderContent--ios .vkuiPanelHeaderContent__children-in { font-family: VK Sans Display, -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 52px; line-height: 56px; line-height: var( --panelheader_height_ios, var(--vkui--size_panel_header_height--regular) ); } .vkuiPanelHeaderContent--android .vkuiPanelHeaderContent__children-in { font-family: VK Sans Display, -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-display); font-size: 23px; font-weight: 500; line-height: 56px; line-height: var( --panelheader_height, var(--vkui--size_panel_header_height--regular) ); } .vkuiPanelHeader--no-before .vkuiPanelHeaderContent--vkcom { padding-left: 16px; } .vkuiPanelHeaderContext--closing, .vkuiPanelHeaderContext--opened { height: 100%; width: 100%; } .vkuiPanelHeaderContext--desktop.vkuiPanelHeaderContext--closing, .vkuiPanelHeaderContext--desktop.vkuiPanelHeaderContext--opened { height: auto; } .vkuiPanelHeaderContext__in { box-sizing: border-box; left: 0; padding: 8px; pointer-events: none; position: absolute; width: 100%; z-index: 2; } .vkuiPanelHeaderContext__fade { background: rgba(0, 0, 0, 0.4); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__fade { -webkit-animation: vkui-animation-panelheadercontext-fade-in 0.2s ease; animation: vkui-animation-panelheadercontext-fade-in 0.2s ease; } .vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__fade { -webkit-animation: vkui-animation-panelheadercontext-fade-out 0.2s ease; animation: vkui-animation-panelheadercontext-fade-out 0.2s ease; } .vkuiPanelHeaderContext--opened .vkuiPanelHeaderContext__in { -webkit-animation: vkui-animation-panelheadercontext-translate-in 0.2s ease; animation: vkui-animation-panelheadercontext-translate-in 0.2s ease; pointer-events: auto; } .vkuiPanelHeaderContext--closing .vkuiPanelHeaderContext__in { -webkit-animation: vkui-animation-panelheadercontext-translate-out 0.2s ease; animation: vkui-animation-panelheadercontext-translate-out 0.2s ease; } .vkuiPanelHeaderContext .vkuiList { background: #fff; background: var(--header_background, var(--vkui--color_background_content)); } .vkuiPanelHeaderContext--ios .vkuiPanelHeaderContext__in { padding: 0; } .vkuiPanelHeaderContext--rounded .vkuiList { border-radius: 12px; overflow: hidden; padding: 8px 0; } .vkuiPanelHeaderContext--desktop .vkuiPanelHeaderContext__in { padding: 12px 8px; } .vkuiPanelHeaderContext--desktop .vkuiPanelHeaderContext__content { background: #fff; background: var(--header_background, var(--vkui--color_background_content)); border-radius: 12px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.16); overflow: hidden; } @-webkit-keyframes vkui-animation-panelheadercontext-translate-in { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes vkui-animation-panelheadercontext-translate-in { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes vkui-animation-panelheadercontext-translate-out { 0% { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes vkui-animation-panelheadercontext-translate-out { 0% { -webkit-transform: translateY(0); transform: translateY(0); } to { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes vkui-animation-panelheadercontext-fade-in { 0% { opacity: 0; } to { opacity: 1; } } @keyframes vkui-animation-panelheadercontext-fade-in { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes vkui-animation-panelheadercontext-fade-out { 0% { opacity: 1; } to { opacity: 0; } } @keyframes vkui-animation-panelheadercontext-fade-out { 0% { opacity: 1; } to { opacity: 0; } } .vkuiPopoutRoot { height: 100%; position: relative; width: 100%; } .vkuiPopoutRoot__popout { position: fixed; } .vkuiPopoutRoot--absolute, .vkuiPopoutRoot__popout { height: 100%; left: 0; top: 0; width: 100%; z-index: 100; z-index: var(--vkui--z_index_popout, 100); } .vkuiPopoutRoot--absolute { position: absolute; } .vkuiPopoutRoot__modal { height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 99; z-index: var(--vkui--z_index_modal, 99); } .vkuiPopoutRoot__modal:empty { display: none; } .vkuiSplitLayout { font-family: -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-common); height: 100%; position: relative; width: 100%; } .vkuiSplitLayout__inner { display: flex; height: 100%; width: 100%; } .vkuiSplitLayout__inner--header { margin-top: -56px; margin-top: calc( ( var( --panelheader_height, var(--vkui--size_panel_header_height--regular) ) + var(--safe-area-inset-top) ) * -1 ); position: relative; z-index: 11; } .vkuiSplitLayout--ios .vkuiSplitLayout__inner--header { margin-top: -52px; margin-top: calc( ( var( --panelheader_height_ios, var(--vkui--size_panel_header_height--regular) ) + var(--safe-area-inset-top) ) * -1 ); } .vkuiSplitLayout__popout { z-index: 100; z-index: var(--vkui--z_index_popout, 100); } .vkuiSplitLayout__modal, .vkuiSplitLayout__popout { height: 100%; left: 0; position: fixed; top: 0; width: 100%; } .vkuiSplitLayout__modal { z-index: 99; z-index: var(--vkui--z_index_modal, 99); } .vkuiSplitLayout__modal:empty { display: none; } .vkuiSplitCol { flex-grow: 1; flex-shrink: 1; height: 100%; position: relative; width: 1px; } .vkuiSplitCol--spaced { margin: 0 16px; margin: 0 var(--vkui--size_split_col_padding_horizontal--regular, 16px); } .vkuiSplitCol--fixed { flex-grow: 1; flex-shrink: 1; height: 100%; width: 1px; } .vkuiSplitCol__fixedInner { height: inherit; max-width: inherit; min-width: inherit; overflow: hidden; position: fixed; -webkit-transform: translateZ(0); transform: translateZ(0); width: inherit; } .vkuiEpic { height: 100%; width: 100%; } .vkuiTabbar { background: #fff; background: var( --header_alternate_background, var(--vkui--color_background_tertiary) ); bottom: 0; box-sizing: initial; height: 48px; height: var(--tabbar_height); left: 0; padding-bottom: 0; padding-bottom: var(--safe-area-inset-bottom); position: fixed; width: 100%; z-index: 2; } .vkuiTabbar__in { display: flex; justify-content: center; overflow: hidden; } .vkuiTabbar--shadow { box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); } .vkuiTabbar--ios.vkuiTabbar--shadow { box-shadow: none; } .vkuiTabbar--ios.vkuiTabbar--shadow:before { background: #d7d8d9; background: var( --separator_common, var(--vkui--color_separator_primary_alpha) ); bottom: 100%; content: ""; height: 1px; left: 0; position: absolute; -webkit-transform-origin: center bottom; transform-origin: center bottom; width: 100%; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .vkuiTabbar--ios:before { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .vkuiTabbar--ios:before { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .vkuiTabbarItem { align-items: center; background: transparent; border: none; color: #99a2ad; color: var(--tabbar_inactive_icon, var(--vkui--color_text_tertiary)); display: flex; height: 48px; height: var(--tabbar_height); justify-content: center; outline: none; padding: 0; position: relative; text-decoration: none; } .vkuiTabbar .vkuiTabbarItem { flex-basis: 0; flex-grow: 1; flex-shrink: 0; max-width: 100%; min-width: 0; } .vkuiTabbarItem--selected { color: #2975cc; color: var(--tabbar_active_icon, var(--vkui--color_text_accent_themed)); } .vkuiTabbarItem__tappable { position: absolute; } .vkuiTabbarItem__in { align-items: center; display: flex; height: 100%; justify-content: center; overflow: hidden; padding: 0 2px; pointer-events: none; width: 100%; } .vkuiTabbar--l-vertical .vkuiTabbarItem--text .vkuiTabbarItem__in { position: relative; top: 2px; } .vkuiTabbar--l-vertical .vkuiTabbarItem__in { flex-direction: column; } .vkuiTabbar--l-horizontal .vkuiTabbarItem__in { flex-direction: row; } .vkuiTabbarItem__icon { color: #99a2ad; color: var(--tabbar_inactive_icon, var(--vkui--color_icon_secondary)); position: relative; } .vkuiTabbarItem--selected .vkuiTabbarItem__icon { color: #2975cc; color: var(--tabbar_active_icon, var(--vkui--color_icon_accent_themed)); } .vkuiTabbarItem__label .vkuiCounter { position: absolute; right: -9px; top: -2px; } .vkuiTabbarItem__label .vkuiBadge { position: absolute; right: -4px; top: -2px; } .vkuiTabbarItem__text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiTabbar--l-vertical .vkuiTabbarItem__text { font-size: 10px; line-height: 12px; margin-top: 2px; } .vkuiTabbar--l-horizontal .vkuiTabbarItem__text { margin-left: 8px; } .vkuiTabbarItem--android .vkuiTabbarItem__tappable { border-radius: 50%; padding-bottom: calc(100% + 16px); width: calc(100% + 16px); } .vkuiTabbarItem--android:first-child { border-bottom-left-radius: 0; border-top-left-radius: 0; } .vkuiTabbarItem--android:last-child { border-bottom-right-radius: 0; border-top-right-radius: 0; } .vkuiTabbarItem--ios .vkuiTabbarItem__tappable { height: 100%; left: 0; top: 0; width: 100%; } .vkuiTabbarItem--ios .vkuiTabbarItem__in { transition: -webkit-transform 0.07s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.07s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.07s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.07s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.07s var(--ios-easing); transition: transform 0.07s var(--ios-easing); transition: transform 0.07s var(--ios-easing), -webkit-transform 0.07s var(--ios-easing); } .vkuiTabbarItem--ios .vkuiTabbarItem__tappable--active + .vkuiTabbarItem__in { -webkit-transform: scale(0.96); transform: scale(0.96); } .vkuiHorizontalScroll { overflow-x: hidden; position: relative; } .vkuiHorizontalScroll__in { -webkit-overflow-scrolling: touch; overflow-x: auto; scrollbar-width: none; } .vkuiHorizontalScroll__in::-webkit-scrollbar { display: none; } .vkuiHorizontalScroll__in-wrapper { transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .vkuiHorizontalScroll__arrowLeft:hover ~ .vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper { -webkit-transform: translateX(8px); transform: translateX(8px); } .vkuiHorizontalScroll__arrowRight:hover ~ .vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper { -webkit-transform: translateX(-8px); transform: translateX(-8px); } .vkuiTabs .vkuiHorizontalScroll { min-width: 100%; } .vkuiTabs__in .vkuiHorizontalScroll__in-wrapper { align-items: stretch; display: flex; } .vkuiTabs--withGaps .vkuiHorizontalScroll__in-wrapper:after, .vkuiTabs--withGaps .vkuiHorizontalScroll__in-wrapper:before { content: ""; display: block; flex-shrink: 0; height: 1px; width: 16px; width: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiHorizontalScrollArrow { background-color: initial; border: none; cursor: pointer; display: flex; flex-direction: column; height: 100%; justify-content: center; opacity: 0; padding: 0; position: absolute; top: 0; transition: opacity 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: var(--android-easing); -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; z-index: 3; } .vkuiHorizontalScrollArrow__icon { align-items: center; background-color: #fff; background-color: var( --modal_card_background, var(--vkui--color_background_modal) ); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); display: flex; justify-content: center; } .vkuiHorizontalScrollArrow--m .vkuiHorizontalScrollArrow__icon { border-radius: 14px; height: 28px; width: 28px; } .vkuiHorizontalScrollArrow--l .vkuiHorizontalScrollArrow__icon { border-radius: 24px; height: 40px; width: 40px; } .vkuiHorizontalScrollArrow--left { left: 0; padding-left: 16px; padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiHorizontalScrollArrow--right { padding-right: 16px; padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px); right: 0; } .vkuiHorizontalScrollArrow--ios .vkuiHorizontalScrollArrow { transition-timing-function: cubic-bezier(0.36, 0.66, 0.04, 1); transition-timing-function: var(--ios-easing); } .vkuiGallery:hover .vkuiHorizontalScrollArrow, .vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiGallery:hover .vkuiHorizontalScrollArrow:hover, .vkuiHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow, .vkuiHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow, .vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover { opacity: 1; } .vkuiPopoutWrapper { box-sizing: border-box; height: 100%; left: 0; pointer-events: none; top: 0; width: 100%; } .vkuiPopoutWrapper--opened { pointer-events: auto; } .vkuiPopoutWrapper--closing { pointer-events: none; } .vkuiPopoutWrapper--fixed { position: fixed; } .vkuiPopoutWrapper__overlay { -webkit-animation: vkui-animation-full-fade-in 0.2s ease; -webkit-animation: vkui-animation-full-fade-in var(--vkui--animation_duration_m, 0.2s) ease; animation: vkui-animation-full-fade-in 0.2s ease; animation: vkui-animation-full-fade-in var(--vkui--animation_duration_m, 0.2s) ease; height: 100%; left: 0; opacity: 1; position: fixed; top: 0; width: 100%; } .vkuiPopoutWrapper--closing .vkuiPopoutWrapper__overlay { opacity: 0; transition: opacity 0.2s cubic-bezier(0.3, 0.3, 0.5, 1); transition: opacity var(--vkui--animation_duration_m, 0.2s) var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1)); } .vkuiPopoutWrapper--masked .vkuiPopoutWrapper__overlay { background: rgba(0, 0, 0, 0.4); background: var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.4)); } .vkuiPopoutWrapper--fixed .vkuiPopoutWrapper__overlay { position: absolute; } .vkuiPopoutWrapper__container { box-sizing: border-box; display: flex; height: 100%; position: relative; width: 100%; } .vkuiPopoutWrapper__content { display: flex; justify-content: center; pointer-events: none; width: 100%; z-index: 2; } .vkuiPopoutWrapper__content > * { pointer-events: auto; } .vkuiPopoutWrapper--v-center .vkuiPopoutWrapper__container { align-items: center; } .vkuiPopoutWrapper--v-bottom .vkuiPopoutWrapper__container { align-items: flex-end; } .vkuiPopoutWrapper--v-top .vkuiPopoutWrapper__container { align-items: flex-start; } .vkuiPopoutWrapper--h-center .vkuiPopoutWrapper__container { justify-content: center; } .vkuiPopoutWrapper--h-left .vkuiPopoutWrapper__container { justify-content: flex-start; } .vkuiPopoutWrapper--h-right .vkuiPopoutWrapper__container { justify-content: flex-end; } @-webkit-keyframes vkui-animation-full-fade-in { 0% { opacity: 0; } to { opacity: 1; } } @keyframes vkui-animation-full-fade-in { 0% { opacity: 0; } to { opacity: 1; } } .vkuiActionSheet { align-items: stretch; -webkit-animation: vkui-animation-actionsheet-intro 0.2s cubic-bezier(0.4, 0, 0.2, 1); animation: vkui-animation-actionsheet-intro 0.2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation: vkui-animation-actionsheet-intro 0.2s var(--android-easing); animation: vkui-animation-actionsheet-intro 0.2s var(--android-easing); background: #fff; background: var(--modal_card_background, var(--vkui--color_background_modal)); border-radius: 12px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); box-sizing: border-box; display: flex; flex-direction: column; margin: 10px; overflow: hidden; padding: 8px 0; position: relative; width: calc(100% - 20px); } .vkuiActionSheet__header { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_subhead)); padding: 16px 20px; } .vkuiActionSheet--closing { -webkit-transform: translateY(calc(100% + 20px)); transform: translateY(calc(100% + 20px)); transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.2s var(--android-easing); transition: transform 0.2s var(--android-easing); transition: transform 0.2s var(--android-easing), -webkit-transform 0.2s var(--android-easing); } .vkuiActionSheet__title + .vkuiActionSheet__text { margin-top: 8px; } .vkuiActionSheet--ios { -webkit-animation: vkui-animation-actionsheet-intro 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-animation-actionsheet-intro 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-animation-actionsheet-intro 0.3s var(--ios-easing); animation: vkui-animation-actionsheet-intro 0.3s var(--ios-easing); background: transparent; margin: initial; padding: 10px; width: 100%; } .vkuiActionSheet--ios.vkuiActionSheet--closing { -webkit-transform: translateY(100%); transform: translateY(100%); transition: -webkit-transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.3s var(--ios-easing); transition: transform 0.3s var(--ios-easing); transition: transform 0.3s var(--ios-easing), -webkit-transform 0.3s var(--ios-easing); } .vkuiActionSheet--ios .vkuiActionSheet__header { border-radius: 14px 14px 0 0; overflow: hidden; position: relative; text-align: center; } .vkuiActionSheet--ios .vkuiActionSheet__title { position: relative; z-index: 2; } .vkuiActionSheet--ios .vkuiActionSheet__title + .vkuiActionSheet__text { margin-top: 9px; } .vkuiActionSheet--ios .vkuiActionSheet__text { position: relative; z-index: 2; } .vkuiActionSheet--ios .vkuiActionSheet__header:before { background-color: #fff; background-color: var( --modal_card_background, var(--vkui--color_background_modal) ); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .vkuiActionSheet--sizeY-compact .vkuiActionSheet__header { padding: 12px 20px; } .vkuiActionSheet--desktop { -webkit-animation: none; animation: none; height: auto; margin: 0; width: auto; } .vkuiActionSheet--desktop.vkuiActionSheet--ios { border-radius: 14px; padding: 0; } @-webkit-keyframes vkui-animation-actionsheet-intro { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes vkui-animation-actionsheet-intro { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); } to { -webkit-transform: translateY(0); transform: translateY(0); } } .vkuiActionSheetItem { align-items: center; border-radius: 0; box-sizing: border-box; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: flex; min-height: 48px; overflow: hidden; padding: 0 20px; text-decoration: none; } .vkuiActionSheetItem, .vkuiActionSheetItem__after, .vkuiActionSheetItem__before, .vkuiActionSheetItem__container { position: relative; z-index: 2; } .vkuiActionSheetItem__after, .vkuiActionSheetItem__before { flex-shrink: 0; } .vkuiActionSheetItem__before { margin-left: -2px; margin-right: 18px; } .vkuiActionSheetItem__container { flex-grow: 1; max-width: 100%; padding: 10px 0; } .vkuiActionSheetItem--ellipsis { overflow: hidden; white-space: nowrap; } .vkuiActionSheetItem__content { align-items: baseline; display: flex; justify-content: space-between; overflow: hidden; } .vkuiActionSheetItem--ellipsis .vkuiActionSheetItem__content { justify-content: flex-start; } .vkuiActionSheetItem__children { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .vkuiActionSheetItem__subtitle { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; } .vkuiActionSheetItem__meta, .vkuiActionSheetItem__subtitle { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiActionSheetItem__meta { flex-shrink: 0; margin-left: 6px; } .vkuiActionSheetItem__before { color: #2688eb; color: var(--action_sheet_action_foreground, var(--vkui--color_icon_accent)); } .vkuiActionSheetItem--destructive .vkuiActionSheetItem__container:first-child { color: #e64646; color: var(--destructive, var(--vkui--color_text_negative)); } .vkuiActionSheetItem--destructive .vkuiActionSheetItem__before { color: #e64646; color: var(--destructive, var(--vkui--color_icon_negative)); } .vkuiActionSheetItem__radio { display: none; } .vkuiActionSheetItem__marker { align-items: center; background-color: initial; color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); display: none; justify-content: center; margin-left: 16px; } .vkuiActionSheetItem__radio:checked ~ .vkuiActionSheetItem__marker { display: flex; } .vkuiActionSheetItem--ios { background: #fff; background: var(--modal_card_background, var(--vkui--color_background_modal)); border-radius: 0; color: #2688eb; color: var(--action_sheet_action_foreground, var(--vkui--color_text_accent)); min-height: 56px; padding: 14px 20px 14px 19px; } .vkuiActionSheetItem--rich { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiActionSheetItem--ios.vkuiActionSheetItem--destructive { color: #e64646; color: var(--destructive, var(--vkui--color_text_negative)); } .vkuiActionSheetItem--ios:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; } .vkuiActionSheetItem--ios:last-child, .vkuiActionSheetItem--ios:not(.vkuiActionSheetItem--desktop):nth-last-child(2) { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .vkuiActionSheetItem--ios:before { background-color: #fff; background-color: var( --modal_card_background, var(--vkui--color_background_modal) ); content: ""; height: 100%; left: 0; position: absolute; top: 0; transition: opacity 0.15s ease-out, background-color 0.15s ease-out; width: 100%; z-index: -1; } .vkuiActionSheetItem--ios:after { background: rgba(0, 0, 0, 0.12); background: var( --action_sheet_separator, var(--vkui--color_separator_primary) ); content: ""; height: 1px; left: 0; position: absolute; right: 0; top: 0; -webkit-transform-origin: center bottom; transform-origin: center bottom; z-index: -1; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .vkuiActionSheetItem--ios:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .vkuiActionSheetItem--ios:after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } } .vkuiActionSheet--ios .vkuiActionSheetItem--last:after, .vkuiActionSheet--ios .vkuiActionSheet__header:empty, .vkuiActionSheetItem--cancel:after, .vkuiActionSheetItem--ios:first-child:after { content: none; } .vkuiActionSheetItem--ios.vkuiActionSheetItem--active:before { background-color: #d7d8d9; background-color: var( --separator_common, var(--vkui--color_transparent--active) ); opacity: 1; transition: none; } .vkuiActionSheetItem--ios .vkuiActionSheetItem__container { padding: 0; } .vkuiActionSheetItem--ios .vkuiActionSheetItem--centered { justify-content: center; } .vkuiActionSheetItem--cancel { border-radius: 14px; margin-bottom: 0; margin-bottom: var(--safe-area-inset-bottom); margin-top: 8px; min-height: 52px; } .vkuiActionSheetItem--desktop { cursor: pointer; width: auto; } .vkuiActionSheetItem[disabled] .vkuiActionSheetItem__children, .vkuiActionSheetItem[disabled] .vkuiActionSheetItem__meta, .vkuiActionSheetItem[disabled] .vkuiActionSheetItem__subtitle { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiActionSheetItem[disabled] .vkuiActionSheetItem__before, .vkuiActionSheetItem[disabled] .vkuiActionSheetItem__marker { color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); } .vkuiActionSheetItem--sizeY-compact { min-height: 32px; } .vkuiActionSheetItem--sizeY-compact.vkuiActionSheetItem--ios { min-height: 36px; padding: 4px 20px 4px 18px; } .vkuiActionSheetItem--sizeY-compact:not(.vkuiActionSheetItem--ios) + .vkuiActionSheetItem--sizeY-compact:not(.vkuiActionSheetItem--ios) { margin-top: 2px; } .vkuiActionSheetItem--sizeY-compact .vkuiActionSheetItem__container { padding: 5px 0; } .vkuiAlert { -webkit-animation: vkui-animation-android-alert-intro 0.2s cubic-bezier(0.4, 0, 0.2, 1); animation: vkui-animation-android-alert-intro 0.2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation: vkui-animation-android-alert-intro 0.2s var(--android-easing); animation: vkui-animation-android-alert-intro 0.2s var(--android-easing); border-radius: 12px; border-radius: var(--vkui--size_border_radius_paper--regular, 12px); box-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.16); box-shadow: var( --vkui--elevation4, 0 0 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.16) ); color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); margin: auto 24px; max-width: 416px; min-width: 280px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vkuiAlert--desktop { width: 100%; } .vkuiAlert--closing { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.2s var(--android-easing), -webkit-transform 0.2s var(--android-easing); transition: transform 0.2s var(--android-easing), opacity 0.2s var(--android-easing); transition: transform 0.2s var(--android-easing), opacity 0.2s var(--android-easing), -webkit-transform 0.2s var(--android-easing); } .vkuiAlert:before { background-color: #fff; background-color: var( --modal_card_background, var(--vkui--color_background_modal) ); border-radius: inherit; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .vkuiAlert__content { padding: 24px 24px 20px; position: relative; z-index: 2; } .vkuiAlert__action { background: transparent; white-space: nowrap; } .vkuiAlert__actions { display: flex; max-width: 100%; padding: 0 16px 16px; position: relative; z-index: 2; } .vkuiAlert__header { margin-bottom: 8px; } .vkuiAlert__text { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiAlert--h .vkuiAlert__actions { justify-content: flex-end; } .vkuiAlert--h .vkuiAlert__button { margin-left: 8px; } .vkuiAlert--v .vkuiAlert__actions { align-items: flex-end; flex-direction: column; } .vkuiAlert--v .vkuiAlert__button { margin-bottom: 4px; margin-top: 4px; } .vkuiAlert--v .vkuiAlert__button:first-child { margin-top: 0; } .vkuiAlert--v .vkuiAlert__button:last-child { margin-bottom: 0; } .vkuiAlert--ios { -webkit-animation: vkui-animation-ios-alert-intro 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-animation-ios-alert-intro 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-animation-ios-alert-intro 0.3s var(--ios-easing); animation: vkui-animation-ios-alert-intro 0.3s var(--ios-easing); box-shadow: none; min-width: 270px; overflow: hidden; width: 270px; } .vkuiAlert--ios.vkuiAlert--closing { opacity: 0; -webkit-transform: none; transform: none; transition: opacity 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: opacity 0.3s var(--ios-easing); } .vkuiAlert--ios .vkuiAlert__content { padding: 19px 16px 20px; text-align: center; } .vkuiAlert--ios .vkuiAlert__header:not(:last-child) { margin-bottom: 7px; } .vkuiAlert--ios .vkuiAlert__text { color: inherit; } .vkuiAlert--ios .vkuiAlert__content:after { background: rgba(0, 0, 0, 0.12); background: var( --action_sheet_separator, var(--vkui--color_separator_primary_alpha) ); bottom: 0; content: ""; height: 1px; left: 0; position: absolute; right: 0; -webkit-transform-origin: center bottom; transform-origin: center bottom; } .vkuiAlert--ios .vkuiAlert__actions { padding: initial; } .vkuiAlert--ios.vkuiAlert--v .vkuiAlert__actions { align-items: normal; flex-direction: column; } .vkuiAlert--ios .vkuiAlert__action { border: 0; border-radius: 0; color: #2688eb; color: var(--accent, var(--vkui--color_text_accent)); display: block; font-size: 17px; height: 44px; line-height: 44px; margin: 0; overflow: hidden; padding: 0 6px; position: relative; text-align: center; text-decoration: none; text-overflow: ellipsis; } .vkuiAlert--ios .vkuiAlert__action:active { z-index: 1; } .vkuiAlert--ios .vkuiAlert__action:after { background: rgba(0, 0, 0, 0.12); background: var( --action_sheet_separator, var(--vkui--color_separator_primary_alpha) ); content: ""; position: absolute; } .vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after { height: 100%; right: 0; top: 0; -webkit-transform-origin: right center; transform-origin: right center; width: 1px; } .vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:last-child:after { content: none; } .vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action { flex-basis: 0; flex-grow: 1; flex-shrink: 1; } .vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:first-child { border-bottom-left-radius: 12px; } .vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:last-child { border-bottom-right-radius: 12px; } .vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after { bottom: 0; height: 1px; left: 0; -webkit-transform-origin: center bottom; transform-origin: center bottom; width: 100%; } .vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:last-child:after { content: none; } .vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:last-child { border-radius: 0 0 12px 12px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .vkuiAlert--ios .vkuiAlert__content:after, .vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after { -webkit-transform: scaleX(0.5); transform: scaleX(0.5); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .vkuiAlert--ios .vkuiAlert__content:after, .vkuiAlert--ios.vkuiAlert--v .vkuiAlert__action:after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); } .vkuiAlert--ios.vkuiAlert--h .vkuiAlert__action:after { -webkit-transform: scaleX(0.33); transform: scaleX(0.33); } } .vkuiAlert--ios .vkuiAlert__action--cancel { font-weight: 600; } .vkuiAlert--ios .vkuiAlert__action--destructive { color: #e64646; color: var(--destructive, var(--vkui--color_text_negative)); } .vkuiAlert--vkcom { box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 96px rgba(0, 0, 0, 0.16); width: 400px; } .vkuiAlert--vkcom .vkuiAlert__content { padding: 24px; } .vkuiAlert--vkcom .vkuiAlert__actions { padding: 0 24px 16px; } .vkuiAlert--vkcom .vkuiAlert__button { order: 2; } .vkuiAlert--vkcom .vkuiAlert__button--cancel { order: 1; } @-webkit-keyframes vkui-animation-ios-alert-intro { 0% { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes vkui-animation-ios-alert-intro { 0% { opacity: 0; -webkit-transform: scale(1.05); transform: scale(1.05); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes vkui-animation-android-alert-intro { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes vkui-animation-android-alert-intro { 0% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .vkuiScreenSpinner { -webkit-animation: vkui-screen-spinner-intro 0.3s ease; animation: vkui-screen-spinner-intro 0.3s ease; } .vkuiScreenSpinner--state-cancelable { cursor: pointer; } .vkuiScreenSpinner__spinner { opacity: 1; } .vkuiScreenSpinner--hideSpinner .vkuiScreenSpinner__spinner { opacity: 0; transition: opacity 0.1s ease; } .vkuiScreenSpinner__container { background: #f9f9f9; background: var(--tabbar_background, var(--vkui--color_background_modal)); border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.16); box-shadow: var( --vkui--elevation4, 0 0 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.16) ); color: #818c99; color: var(--overlay_status_icon, var(--vkui--color_icon_medium)); height: 88px; position: relative; width: 88px; } .vkuiScreenSpinner__icon { align-items: center; display: flex; height: 100%; justify-content: center; position: absolute; top: 0; width: 100%; } .vkuiScreenSpinner__icon .vkuiIcon { -webkit-animation: vkui-screen-spinner-intro 0.2s ease; animation: vkui-screen-spinner-intro 0.2s ease; } .vkuiScreenSpinner--state-done .vkuiScreenSpinner__icon .vkuiIcon path { stroke-dasharray: 50; stroke-dashoffset: 50; -webkit-animation: vkui-screen-spinner-iconDone 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) 0.3s forwards; animation: vkui-screen-spinner-iconDone 0.6s cubic-bezier(0.36, 0.66, 0.04, 1) 0.3s forwards; -webkit-animation: vkui-screen-spinner-iconDone 0.6s 0.3s var(--ios-easing) forwards; animation: vkui-screen-spinner-iconDone 0.6s 0.3s var(--ios-easing) forwards; } @-webkit-keyframes vkui-screen-spinner-iconDone { 0% { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } } @keyframes vkui-screen-spinner-iconDone { 0% { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } } @-webkit-keyframes vkui-screen-spinner-intro { 0% { opacity: 0; } to { opacity: 1; } } @keyframes vkui-screen-spinner-intro { 0% { opacity: 0; } to { opacity: 1; } } .vkuiSnackbar { bottom: 0; left: auto; padding-bottom: 0; padding-bottom: var(--safe-area-inset-bottom); padding-left: 0; padding-left: var(--safe-area-inset-left); padding-right: 0; padding-right: var(--safe-area-inset-right); position: fixed; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; z-index: 101; z-index: calc(var(--vkui--z_index_popout, 100) + 1); } .vkuiEpic .vkuiSnackbar { padding-bottom: 48px; padding-bottom: calc(var(--tabbar_height) + var(--safe-area-inset-bottom)); } .vkuiSnackbar__body, .vkuiSnackbar__in { transition: -webkit-transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.32s var(--android-easing); transition: transform 0.32s var(--android-easing); transition: transform 0.32s var(--android-easing), -webkit-transform 0.32s var(--android-easing); } .vkuiSnackbar__in { -webkit-animation: vkui-animation-snackbar-intro-vertical 0.34s cubic-bezier(0.4, 0, 0.2, 1); animation: vkui-animation-snackbar-intro-vertical 0.34s cubic-bezier(0.4, 0, 0.2, 1); -webkit-animation: vkui-animation-snackbar-intro-vertical 0.34s var(--android-easing); animation: vkui-animation-snackbar-intro-vertical 0.34s var(--android-easing); padding: 8px; } .vkuiSnackbar--closing .vkuiSnackbar__in { -webkit-transform: translate3d(0, 140%, 0); transform: translate3d(0, 140%, 0); } .vkuiSnackbar__body { align-items: center; background: #fff; background: var(--modal_card_background, var(--vkui--color_background_modal)); border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.16); box-shadow: var( --vkui--elevation4, 0 0 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.16) ); box-sizing: border-box; display: flex; min-height: 56px; padding: 12px 16px; } .vkuiSnackbar--dark .vkuiSnackbar__body { background: #2d2d2e; background: var(--vkui--color_background_contrast_inverse, #2d2d2e); } .vkuiSnackbar__before { margin-left: -4px; margin-right: 12px; } .vkuiSnackbar__after { margin-left: 12px; margin-right: -4px; } .vkuiSnackbar__content { align-items: center; display: flex; flex: 1 1; overflow: hidden; } .vkuiSnackbar--l-vertical .vkuiSnackbar__content { align-items: flex-start; flex-direction: column; } .vkuiSnackbar__content-text { -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: -webkit-box; flex: 1 1; overflow: hidden; width: 100%; } .vkuiSnackbar--dark .vkuiSnackbar__content-text { color: #fff; color: var(--vkui--color_text_contrast, #fff); } .vkuiSnackbar--l-horizontal .vkuiSnackbar__action { margin-right: -12px; margin-right: calc( var(--vkui--size_button_tertiary_small_padding_horizontal--regular, 12px) * -1 ); position: relative; } .vkuiSnackbar--l-vertical .vkuiSnackbar__action { margin-bottom: -6px; margin-left: -12px; margin-left: calc( var(--vkui--size_button_tertiary_small_padding_horizontal--regular, 12px) * -1 ); } .vkuiModalRoot .vkuiSnackbar { padding-bottom: 0; padding-bottom: var(--safe-area-inset-bottom); } .vkuiSnackbar--ios .vkuiSnackbar__body, .vkuiSnackbar--ios .vkuiSnackbar__in { transition: -webkit-transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.4s var(--ios-easing); transition: transform 0.4s var(--ios-easing); transition: transform 0.4s var(--ios-easing), -webkit-transform 0.4s var(--ios-easing); } .vkuiSnackbar--ios .vkuiSnackbar__in { -webkit-animation: vkui-animation-snackbar-intro-vertical 0.34s cubic-bezier(0.36, 0.66, 0.04, 1); animation: vkui-animation-snackbar-intro-vertical 0.34s cubic-bezier(0.36, 0.66, 0.04, 1); -webkit-animation: vkui-animation-snackbar-intro-vertical 0.34s var(--ios-easing); animation: vkui-animation-snackbar-intro-vertical 0.34s var(--ios-easing); } .vkuiSnackbar--desktop { bottom: 0; left: 0; max-width: 328px; } .vkuiSnackbar--desktop .vkuiSnackbar__in { -webkit-animation-name: vkui-animation-snackbar-intro-horizontal; animation-name: vkui-animation-snackbar-intro-horizontal; padding: 12px; } .vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in { -webkit-transform: translate3d(-140%, 0, 0); transform: translate3d(-140%, 0, 0); } .vkuiSnackbar--touched .vkuiSnackbar__body { transition: none; } @-webkit-keyframes vkui-animation-snackbar-intro-vertical { 0% { -webkit-transform: translate3d(0, 140%, 0); transform: translate3d(0, 140%, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes vkui-animation-snackbar-intro-vertical { 0% { -webkit-transform: translate3d(0, 140%, 0); transform: translate3d(0, 140%, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes vkui-animation-snackbar-intro-horizontal { 0% { -webkit-transform: translate3d(-140%, 0, 0); transform: translate3d(-140%, 0, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes vkui-animation-snackbar-intro-horizontal { 0% { -webkit-transform: translate3d(-140%, 0, 0); transform: translate3d(-140%, 0, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .vkuiModalCardBase__container { background: #fff; background: var(--modal_card_background, var(--vkui--color_background_modal)); border-radius: 18px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; margin-bottom: 0; margin-bottom: var(--safe-area-inset-bottom); padding: 16px; pointer-events: auto; position: relative; } .vkuiModalCardBase__container--softwareKeyboardOpened { margin-bottom: 0; } .vkuiModalCardBase__header, .vkuiModalCardBase__subheader { margin: 0; padding: 0 8px; text-align: center; word-break: break-word; } .vkuiModalCardBase__header { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiModalCardBase__subheader { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_subhead)); } .vkuiModalCardBase__header + .vkuiModalCardBase__subheader { margin-top: 8px; } .vkuiModalCardBase__icon { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); margin: 8px auto 16px; } .vkuiModalCardBase__actions { display: flex; margin-left: -6px; margin-right: -6px; margin-top: 16px; } .vkuiModalCardBase .vkuiUsersStack + .vkuiModalCardBase__actions { margin-top: 24px; } .vkuiModalCardBase__header + .vkuiModalCardBase__actions, .vkuiModalCardBase__subheader + .vkuiModalCardBase__actions { margin-top: 32px; } .vkuiModalCardBase__actions--v { flex-direction: column; margin-left: 0; margin-right: 0; } .vkuiModalCardBase__dismiss { color: #99a2ad; color: var( --placeholder_icon_foreground_primary, var(--vkui--color_icon_secondary) ); height: 48px; justify-content: center; position: absolute; right: 4px; top: 4px; width: 48px; } .vkuiModalCardBase--ios .vkuiModalCardBase__header:first-child { padding-left: 36px; padding-right: 36px; } .vkuiModalCardBase--android .vkuiModalCardBase__container, .vkuiModalCardBase--vkcom .vkuiModalCardBase__container { border-radius: 12px; } .vkuiModalCardBase--desktop .vkuiModalCardBase__container { border-radius: 8px; } .vkuiModalRoot, .vkuiModalRoot__mask { height: 100%; width: 100%; } .vkuiModalRoot__mask { -webkit-animation: vkui-animation-fadeIn 0.32s ease; animation: vkui-animation-fadeIn 0.32s ease; background: rgba(0, 0, 0, 0.4); left: 0; opacity: 1; position: absolute; top: 0; transition: opacity 167ms ease-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vkuiModalRoot--touched .vkuiModalRoot__mask { transition: none; } .vkuiModalRoot--switching .vkuiModalRoot__mask { pointer-events: none; } .vkuiModalRoot__viewport { bottom: 0; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; } :not(.vkuiModalRoot--desktop).vkuiModalRoot--android .vkuiModalRoot__viewport, :not(.vkuiModalRoot--desktop).vkuiModalRoot--ios .vkuiModalRoot__viewport { top: 0; top: var(--safe-area-inset-top); } :not(.vkuiModalRoot--desktop).vkuiModalRoot--vkapps.vkuiModalRoot--android .vkuiModalRoot__viewport { top: 56px; top: calc(var(--safe-area-inset-top) + 56px); top: calc( var(--safe-area-inset-top) + var(--panelheader_height, var(--vkui--size_panel_header_height--regular)) ); } :not(.vkuiModalRoot--desktop).vkuiModalRoot--vkapps.vkuiModalRoot--ios .vkuiModalRoot__viewport { top: 52px; top: calc(var(--safe-area-inset-top) + 56px); top: calc( var(--safe-area-inset-top) + var( --panelheader_height_ios, var(--vkui--size_panel_header_height--regular) ) ); } .vkuiModalRoot__modal { box-sizing: border-box; height: 100%; position: absolute; width: 100%; z-index: 1; } @-webkit-keyframes vkui-animation-fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes vkui-animation-fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .vkuiModalCard { align-items: flex-end; box-sizing: border-box; display: flex; height: 100%; left: 0; padding: 8px; position: absolute; top: 0; width: 100%; z-index: 1; } .vkuiModalCard__in { margin-left: auto; margin-right: auto; -webkit-transform: translateY(calc(100% + 16px)); transform: translateY(calc(100% + 16px)); width: 100%; } .vkuiModalCard--ios .vkuiModalCard__in { max-width: 414px; transition: -webkit-transform 0.34s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.34s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.34s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.34s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.34s var(--ios-easing); transition: transform 0.34s var(--ios-easing); transition: transform 0.34s var(--ios-easing), -webkit-transform 0.34s var(--ios-easing); } .vkuiModalCard--android .vkuiModalCard__in, .vkuiModalCard--vkcom .vkuiModalCard__in { transition: -webkit-transform 0.34s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.34s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.34s var(--android-easing); transition: transform 0.34s var(--android-easing); transition: transform 0.34s var(--android-easing), -webkit-transform 0.34s var(--android-easing); } .vkuiModalCard--android .vkuiModalCard__in { max-width: 440px; } .vkuiModalCard--vkcom .vkuiModalCard__in { max-width: 400px; } .vkuiModalCard--desktop { align-items: center; } .vkuiModalCard--desktop .vkuiModalCard__in { opacity: 0; -webkit-transform: unset; -webkit-transform: initial; transform: none; transition: opacity 0.34s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.34s var(--android-easing); } .vkuiModalRoot--touched .vkuiModalCard__in { transition: none; } .vkuiModalPage { box-sizing: border-box; height: 100%; overflow: hidden; pointer-events: none; position: absolute; width: 100%; z-index: 1; } .vkuiModalPage--desktop { align-items: center; display: flex; justify-content: center; } .vkuiModalPage__in-wrap { align-items: flex-end; bottom: 0; display: flex; height: 100%; left: 0; margin-left: auto; margin-right: auto; pointer-events: auto; position: absolute; right: 0; -webkit-transform: translateY(100%); transform: translateY(100%); transition: -webkit-transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.32s var(--android-easing); transition: transform 0.32s var(--android-easing); transition: transform 0.32s var(--android-easing), -webkit-transform 0.32s var(--android-easing); width: 100%; } .vkuiModalPage--ios .vkuiModalPage__in-wrap { transition: -webkit-transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.4s var(--ios-easing); transition: transform 0.4s var(--ios-easing); transition: transform 0.4s var(--ios-easing), -webkit-transform 0.4s var(--ios-easing); } .vkuiModalPage--desktop .vkuiModalPage__in-wrap { align-items: normal; height: auto; margin: 32px 56px; max-height: 640px; opacity: 0; position: relative; -webkit-transform: none; transform: none; transition: opacity 0.34s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.34s var(--android-easing); } @media (max-height: 672px) { .vkuiModalPage--desktop .vkuiModalPage__in-wrap { max-height: calc(100% - 64px); } } .vkuiModalPage--s .vkuiModalPage__in-wrap { max-width: 420px; max-width: var(--vkui--size_popup_small--regular, 420px); } .vkuiModalPage--m .vkuiModalPage__in-wrap { max-width: 680px; max-width: var(--vkui--size_popup_medium--regular, 680px); } .vkuiModalPage--l .vkuiModalPage__in-wrap { max-width: 880px; max-width: var(--vkui--size_popup_large--regular, 880px); } .vkuiModalPage--vkcom .vkuiModalPage__in-wrap { max-width: 448px; } .vkuiModalPage__in { background-color: #fff; background-color: var( --background_content, var(--vkui--color_background_modal) ); border-top-left-radius: 12px; border-top-left-radius: var(--vkui--size_border_radius_paper--regular, 12px); border-top-right-radius: 12px; border-top-right-radius: var(--vkui--size_border_radius_paper--regular, 12px); box-sizing: border-box; display: flex; flex-direction: column; height: 100%; overflow: visible; position: relative; width: 100%; } .vkuiModalPage--desktop .vkuiModalPage__in { border-bottom-left-radius: 12px; border-bottom-left-radius: var( --vkui--size_border_radius_paper--regular, 12px ); border-bottom-right-radius: 12px; border-bottom-right-radius: var( --vkui--size_border_radius_paper--regular, 12px ); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); height: auto; } .vkuiModalPage__header { width: 100%; } .vkuiModalPage__content-wrap { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; height: 100%; overflow: hidden; position: relative; } .vkuiModalPage__content { box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: hidden; } .vkuiModalPage--desktop .vkuiModalPage__content, .vkuiModalRoot__modal--expandable .vkuiModalPage__content { -webkit-overflow-scrolling: touch; overflow-y: auto; } .vkuiModalPage__content-in { padding-bottom: 0; padding-bottom: var(--safe-area-inset-bottom); position: relative; } .vkuiModalPage__footer { background-color: #fff; background-color: var( --background_content, var(--vkui--color_background_modal) ); position: relative; z-index: 10; } .vkuiModalRoot--touched .vkuiModalPage__in-wrap { transition: none; } .vkuiModalRoot--switching .vkuiModalPage__in-wrap { pointer-events: none; } .vkuiModalRoot__modal--collapsed .vkuiModalPage__content, .vkuiModalRoot__modal--dragging .vkuiModalPage__content { overflow: hidden; touch-action: pan-y; } .vkuiModalRoot--touched .vkuiModalPage__footer { transition: none; } .vkuiModalDismissButton { box-sizing: border-box; color: #fff; color: var(--white, var(--vkui--color_icon_contrast)); height: 56px; justify-content: center; padding: 18px; position: absolute; right: -56px; top: 0; transition: opacity 0.15s ease-out; width: 56px; } .vkuiModalDismissButton:before { background: rgba(0, 0, 0, 0.4); background: var(--vkui--color_overlay_primary, rgba(0, 0, 0, 0.4)); border-radius: 50%; bottom: 14px; content: ""; display: block; left: 14px; position: absolute; right: 14px; top: 14px; } .vkuiModalDismissButton .vkuiIcon { -webkit-transform: translateX(0); transform: translateX(0); } .vkuiModalDismissButton--hover.vkuiModalDismissButton:before { background: rgba(0, 0, 0, 0.44); background: var(--vkui--color_overlay_primary--hover, rgba(0, 0, 0, 0.44)); } .vkuiModalDismissButton--active.vkuiModalDismissButton:before { background: rgba(0, 0, 0, 0.48); background: var(--vkui--color_overlay_primary--active, rgba(0, 0, 0, 0.48)); } .vkuiModalPageHeader { --safe-area-inset-top: 0; position: relative; z-index: 2; } .vkuiModalPageHeader--withGaps { padding-left: 4px; padding-right: 4px; } .vkuiModalPageHeader--desktop.vkuiModalPageHeader--withGaps { padding-left: 8px; padding-right: 8px; } .vkuiModalPageHeader .vkuiIcon--cancel_24, .vkuiModalPageHeader .vkuiIcon--dismiss_24 { color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); } .vkuiButtonGroup { display: inline-flex; max-width: 100%; } .vkuiButtonGroup--stretched { display: flex; width: 100%; } .vkuiButtonGroup--mode-vertical { flex-direction: column; } .vkuiButtonGroup--mode-horizontal { flex-direction: row; } .vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-space > :not(:first-child) { margin-top: 1px; margin-top: var(--vkui--size_button_group_gap_space--regular, 1px); } .vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-s > :not(:first-child) { margin-top: 8px; margin-top: var(--vkui--size_button_group_gap_small--regular, 8px); } .vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-m > :not(:first-child) { margin-top: 12px; margin-top: var(--vkui--size_button_group_gap_medium--regular, 12px); } .vkuiButtonGroup--mode-horizontal > :not(.vkuiButtonGroup) { min-width: 0; } .vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-space > :not(:last-child) { margin-right: 1px; margin-right: var(--vkui--size_button_group_gap_space--regular, 1px); } .vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-s > :not(:last-child) { margin-right: 8px; margin-right: var(--vkui--size_button_group_gap_small--regular, 8px); } .vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-m > :not(:last-child) { margin-right: 12px; margin-right: var(--vkui--size_button_group_gap_medium--regular, 12px); } .vkuiButtonGroup--align-left { align-items: flex-start; } .vkuiButtonGroup--align-center { align-items: center; } .vkuiButtonGroup--align-right { align-items: flex-end; } .vkuiBadge { border-radius: 50%; display: block; flex-grow: 0; flex-shrink: 0; height: 6px; width: 6px; } .vkuiBadge--new { background-color: #5c9ce6; background-color: #2688eb; background-color: var(--blue_200, var(--vkui--color_icon_accent)); } .vkuiBadge--prominent { background-color: #ff3347; background-color: var( --counter_prominent_background, var(--vkui--color_icon_negative) ); } .vkuiIconButton { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; border-radius: 9999px; box-shadow: none; color: currentColor; display: block; height: 48px; margin: 0; padding: 0; position: relative; } .vkuiIconButton--sizeY-compact { height: 44px; } .vkuiIconButton[disabled] { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiIconButton--ios { border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); } .vkuiIconButton .vkuiIcon--16 { padding: 16px; } .vkuiIconButton .vkuiIcon--16.vkuiIcon--w-8 { padding: 16px 14px; } .vkuiIconButton--sizeY-compact .vkuiIcon--16, .vkuiIconButton--sizeY-compact .vkuiIcon--16.vkuiIcon--w-8 { padding: 14px; } .vkuiIconButton .vkuiIcon--24 { padding: 12px; } .vkuiIconButton .vkuiIcon--28, .vkuiIconButton--sizeY-compact .vkuiIcon--24 { padding: 10px; } .vkuiIconButton--sizeY-compact .vkuiIcon--28 { padding: 8px; } .vkuiFormField__after .vkuiIconButton, .vkuiFormItem--removable .vkuiRemovable__content > .vkuiIconButton, .vkuiFormLayoutGroup--removable .vkuiRemovable__content > .vkuiIconButton { align-content: center; align-items: center; border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); display: flex; height: 44px; height: var(--vkui--size_field_height--regular, 44px); justify-content: center; width: 44px; width: var(--vkui--size_field_height--regular, 44px); } .vkuiFormField__after .vkuiIconButton .vkuiIcon.vkuiIcon.vkuiIcon { padding: 0; } .vkuiFormField__after .vkuiIconButton--sizeY-compact { width: 36px; width: var(--vkui--size_field_height--compact, 36px); } .vkuiFormField__after .vkuiIconButton--sizeY-compact, .vkuiFormItem--removable .vkuiRemovable__content > .vkuiIconButton--sizeY-compact, .vkuiFormLayoutGroup--removable .vkuiRemovable__content > .vkuiIconButton--sizeY-compact { height: 36px; height: var(--vkui--size_field_height--compact, 36px); } .vkuiCard { background: #f5f5f5; background: var( --content_tint_background, var(--vkui--color_background_secondary) ); border-radius: 8px; border-radius: var(--vkui--size_card_border_radius--regular, 8px); position: relative; } .vkuiCard__in { border-radius: inherit; position: relative; z-index: 2; } .vkuiCard--md-shadow { box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.08), 0 0 2px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 2px 24px 0 rgba(0, 0, 0, 0.08), 0 0 2px 0 rgba(0, 0, 0, 0.08) ); } .vkuiCard--md-outline, .vkuiCard--md-shadow { background: #fff; background: var(--modal_card_background, var(--vkui--color_background_modal)); } .vkuiCard--md-outline:before { border: 1px solid #e1e3e6; border: var(--thin-border) solid var(--input_border, var(--vkui--color_image_border_alpha)); border-radius: inherit; box-sizing: border-box; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .vkuiCardScroll .vkuiCard { flex-shrink: 0; margin-right: 8px; margin-right: var(--vkui--size_cardgrid_padding--regular, 8px); } .vkuiCardScroll .vkuiCard:last-of-type { margin-right: 0; } .vkuiCardScroll--s .vkuiCard { width: 40%; } .vkuiCardScroll--m .vkuiCard { width: 62%; } .vkuiCardScroll--l .vkuiCard { margin-right: 16px; margin-right: var(--vkui--size_base_padding_horizontal--regular, 16px); width: calc(100% - 32px); width: calc( 100% - var(--vkui--size_base_padding_horizontal--regular, 16px) * 2 ); } .vkuiGroup--card .vkuiCardScroll--l .vkuiCard, .vkuiSplitCol--spaced .vkuiCardScroll--l .vkuiCard { margin-right: 16px; width: calc(100% - 32px); } .vkuiGroup--card .vkuiCardScroll--l .vkuiCard:last-of-type, .vkuiSplitCol--spaced .vkuiCardScroll--l .vkuiCard:last-of-type { margin-right: 0; } .vkuiCardGrid { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: flex-start; } .vkuiCardGrid--spaced { padding: 12px 16px; padding: var(--vkui--size_base_padding_vertical--regular, 12px) var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiCardGrid .vkuiCard { margin-right: 8px; margin-right: var(--vkui--size_cardgrid_padding--regular, 8px); } .vkuiCardGrid--l .vkuiCard { margin-right: 0; width: 100%; } .vkuiCardGrid--l .vkuiCard:not(:first-child) { margin-top: 8px; margin-top: var(--vkui--size_cardgrid_padding--regular, 8px); } .vkuiCardGrid--m .vkuiCard { width: calc(50% - 4px); width: calc(50% - var(--vkui--size_cardgrid_padding--regular, 8px) / 2); } .vkuiCardGrid--m .vkuiCard:nth-child(n + 3) { margin-top: 8px; margin-top: var(--vkui--size_cardgrid_padding--regular, 8px); } .vkuiCardGrid--m .vkuiCard:nth-child(2n) { margin-right: 0; } .vkuiCardGrid--s .vkuiCard { width: calc(33.33333% - 5.33333px); width: calc( 33.33333% - var(--vkui--size_cardgrid_padding--regular, 8px) * 2 / 3 ); } .vkuiCardGrid--s .vkuiCard:nth-child(n + 4) { margin-top: 8px; margin-top: var(--vkui--size_cardgrid_padding--regular, 8px); } .vkuiCardGrid--s .vkuiCard:nth-child(3n) { margin-right: 0; } .vkuiCardGrid--sizeX-compact { padding-left: 16px; padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px); padding-right: 16px; padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiCardGrid + .vkuiCardGrid { margin-top: 16px; margin-top: calc( var(--vkui--size_cardgrid_padding_vertical--regular, 8px) * 2 ); } .vkuiGroup--card .vkuiCardGrid { padding-left: 16px; padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px); padding-right: 16px; padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiGroup .vkuiCardGrid:first-child { margin-top: 8px; margin-top: var(--vkui--size_cardgrid_padding_vertical--regular, 8px); } .vkuiGroup .vkuiCardGrid:last-child { margin-bottom: 8px; margin-bottom: var(--vkui--size_cardgrid_padding_vertical--regular, 8px); } .vkuiCardScroll__in { align-items: stretch; display: flex; } .vkuiCardScroll__gap { display: block; flex-shrink: 0; } .vkuiCardScroll + .vkuiCardScroll { margin-top: 16px; } .vkuiCardScroll--withSpaces .vkuiCardScroll__gap { width: 16px; width: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll { margin-left: -16px; margin-right: -16px; } .vkuiSplitCol--spaced .vkuiCardScroll--withSpaces .vkuiCardScroll__gap { width: 16px; } .vkuiGroup--card .vkuiCardScroll--withSpaces { margin-left: -8px; margin-right: -8px; } .vkuiGroup--card .vkuiCardScroll--withSpaces:first-child { padding-top: 8px; padding-top: var(--vkui--size_cardgrid_padding_vertical--regular, 8px); } .vkuiGroup--card .vkuiCardScroll--withSpaces:last-child { padding-bottom: 8px; padding-bottom: var(--vkui--size_cardgrid_padding_vertical--regular, 8px); } .vkuiContentCard--disabled { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiContentCard__body { padding: 12px 16px; padding: var(--vkui--size_base_padding_vertical--regular, 12px) var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiContentCard__tappable { border-radius: 8px; border-radius: var(--vkui--size_card_border_radius--regular, 8px); color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: block; text-decoration: none; } .vkuiContentCard__img { border-radius: 8px 8px 0 0; border-radius: var(--vkui--size_card_border_radius--regular, 8px) var(--vkui--size_card_border_radius--regular, 8px) 0 0; display: block; object-fit: cover; } .vkuiContentCard__text:not(:last-child) { margin-bottom: 4px; } .vkuiContentCard__caption, .vkuiContentCard__subtitle { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiDiv { padding: 12px 16px; padding: var(--vkui--size_base_padding_vertical--regular, 12px) var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiLink { background: none; border: 0; border-radius: 0; color: #2d81e0; color: var(--text_link, var(--vkui--color_text_link)); cursor: pointer; display: inline; font-size: inherit; margin: 0; padding: 0; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .vkuiLink:hover { text-decoration: underline; } } .vkuiLink--focus-visible { outline: 2px solid #2688eb !important; outline: 2px solid var(--accent, var(--vkui--color_stroke_accent)) !important; } .vkuiLink--has-visited:visited { color: #4986cc; color: var(--vkui--color_text_link_visited, #4986cc); } .vkuiLink .vkuiIcon { display: inline-block; margin-left: 4px; vertical-align: middle; } .vkuiHeader { align-items: baseline; display: flex; justify-content: space-between; padding: 0 0 0 16px; padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px); padding-right: 16px; padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .vkuiHeader__main { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .vkuiHeader__content { align-items: baseline; display: flex; } .vkuiHeader__content-in { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiHeader__content-in--multiline { white-space: normal; word-break: break-word; } .vkuiHeader--multiline { white-space: normal; } .vkuiHeader__subtitle { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child) { margin-top: -1px; } .vkuiHeader--mode-secondary:not(.vkuiHeader--pi) .vkuiHeader__main, .vkuiHeader--mode-tertiary .vkuiHeader__main, .vkuiHeader__indicator { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiHeader__indicator { flex-shrink: 0; margin-left: 6px; } .vkuiHeader--mode-primary .vkuiHeader__indicator { color: #6d7885; color: var(--text_subhead, var(--vkui--color_text_subhead)); } .vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator { align-self: center; } .vkuiHeader--mode-secondary .vkuiHeader__indicator { margin-left: 8px; } .vkuiHeader__aside { margin-left: 12px; white-space: nowrap; } .vkuiHeader__aside > .vkuiIcon { color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); position: relative; } .vkuiHeader__aside > .vkuiIcon--24 { top: 3px; } .vkuiHeader__aside > .vkuiIcon--16 { top: 1px; } .vkuiHeader--android .vkuiHeader__main { margin: 15px 0 9px; } .vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main { margin-top: 11px; } .vkuiHeader--ios .vkuiHeader__main { margin: 13px 0 9px; } .vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main { margin: 14px 0 10px; } .vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main { margin-top: 9px; } .vkuiHeader--vkcom { align-items: center; height: 64px; } .vkuiHeader--vkcom .vkuiHeader__main { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child) { margin-top: 0; } .vkuiHeader--vkcom.vkuiHeader--mode-secondary { height: 56px; } .vkuiHeader--vkcom.vkuiHeader--mode-tertiary { height: 40px; } .vkuiGroup--mode-plain:not(:first-of-type) > .vkuiTappable:first-child > .vkuiHeader, .vkuiGroup--plain:not(:first-of-type) > .vkuiHeader:first-child { margin-top: -16px; } .vkuiGroup--card > .vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child, .vkuiGroup--mode-card > .vkuiTappable:first-child > .vkuiHeader:not(.vkuiHeader--mode-tertiary) { margin-top: -4px; } .vkuiGroup { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); padding-bottom: 8px; padding-top: 8px; } .vkuiGroup--card.vkuiGroup--padding-s { padding: 4px; } .vkuiGroup--card.vkuiGroup--padding-m { padding: 8px; } .vkuiGroup--sizeX-compact { padding-left: 0; padding-right: 0; } .vkuiGroup--card { background: #fff; background: var(--background_content, var(--vkui--color_background_content)); border-radius: 12px; border-radius: var(--vkui--size_border_radius_paper--regular, 12px); position: relative; } .vkuiGroup--card:after { border-radius: inherit; box-shadow: inset 0 0 0 1px #d7d8d9; box-shadow: inset 0 0 0 var(--thin-border) #d7d8d9; box-shadow: inset 0 0 0 var(--thin-border) var(--separator_common, var(--vkui--color_separator_primary)); content: ""; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } .vkuiGroup--plain + .vkuiGroup__separator { padding-bottom: 8px; padding-top: 8px; } .vkuiGroup--sizeX-regular.vkuiGroup--plain + .vkuiGroup__separator { padding: 8px; } .vkuiGroup:last-of-type + .vkuiGroup__separator { display: none; } .vkuiGroup--sizeX-regular.vkuiGroup--card:last-of-type + .vkuiGroup__separator, .vkuiGroup:last-of-type + .vkuiGroup__separator--force { display: block; } .vkuiGroup__description { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); display: block; padding: 4px 16px 16px; } .vkuiGroup .vkuiGroup, .vkuiGroup .vkuiGroup + .vkuiGroup__separator { padding-left: 0; padding-right: 0; } .vkuiGroup .vkuiGroup:first-of-type { padding-top: 0; } .vkuiGroup .vkuiGroup:last-of-type { padding-bottom: 0; } .vkuiGroup--ios .vkuiGroup__description { padding: 4px 12px 16px; } .vkuiPanelHeader--vkcom + * .vkuiGroup--card:first-of-type, .vkuiPanelHeader--vkcom ~ .vkuiGroup--card:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; position: relative; top: -1px; } .vkuiGradient--md-tint.vkuiGradient--to-top { background: linear-gradient( 180deg, hsla(0, 0%, 98%, 0), hsla(0, 0%, 98%, 0.036) 13%, hsla(0, 0%, 98%, 0.15) 27%, hsla(0, 0%, 98%, 0.79) 68%, hsla(0, 0%, 98%, 0.95) 84%, #f9f9f9 ); background: linear-gradient( 180deg, hsla(0, 0%, 98%, 0) 0, hsla(0, 0%, 98%, 0.036) 13%, hsla(0, 0%, 98%, 0.15) 27%, hsla(0, 0%, 98%, 0.79) 68%, hsla(0, 0%, 98%, 0.95) 84%, #f9f9f9 ); background: linear-gradient( to bottom, var( --vkui--gradient_tint, hsla(0, 0%, 98%, 0) 0, hsla(0, 0%, 98%, 0.036) 13%, hsla(0, 0%, 98%, 0.15) 27%, hsla(0, 0%, 98%, 0.79) 68%, hsla(0, 0%, 98%, 0.95) 84%, #f9f9f9 100% ) ); } .vkuiGradient--md-tint.vkuiGradient--to-bottom { background: linear-gradient( 0deg, hsla(0, 0%, 98%, 0), hsla(0, 0%, 98%, 0.036) 13%, hsla(0, 0%, 98%, 0.15) 27%, hsla(0, 0%, 98%, 0.79) 68%, hsla(0, 0%, 98%, 0.95) 84%, #f9f9f9 ); background: linear-gradient( 0deg, hsla(0, 0%, 98%, 0) 0, hsla(0, 0%, 98%, 0.036) 13%, hsla(0, 0%, 98%, 0.15) 27%, hsla(0, 0%, 98%, 0.79) 68%, hsla(0, 0%, 98%, 0.95) 84%, #f9f9f9 ); background: linear-gradient( to top, var( --vkui--gradient_tint, hsla(0, 0%, 98%, 0) 0, hsla(0, 0%, 98%, 0.036) 13%, hsla(0, 0%, 98%, 0.15) 27%, hsla(0, 0%, 98%, 0.79) 68%, hsla(0, 0%, 98%, 0.95) 84%, #f9f9f9 100% ) ); } .vkuiGradient--md-white.vkuiGradient--to-top { background: linear-gradient( 180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.036) 13%, hsla(0, 0%, 100%, 0.15) 27%, hsla(0, 0%, 100%, 0.79) 68%, hsla(0, 0%, 100%, 0.95) 84%, #fff ); background: linear-gradient( 180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.036) 13%, hsla(0, 0%, 100%, 0.15) 27%, hsla(0, 0%, 100%, 0.79) 68%, hsla(0, 0%, 100%, 0.95) 84%, #fff ); background: linear-gradient( to bottom, var( --vkui--gradient_white, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.036) 13%, hsla(0, 0%, 100%, 0.15) 27%, hsla(0, 0%, 100%, 0.79) 68%, hsla(0, 0%, 100%, 0.95) 84%, #fff 100% ) ); } .vkuiGradient--md-white.vkuiGradient--to-bottom { background: linear-gradient( 0deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.036) 13%, hsla(0, 0%, 100%, 0.15) 27%, hsla(0, 0%, 100%, 0.79) 68%, hsla(0, 0%, 100%, 0.95) 84%, #fff ); background: linear-gradient( 0deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.036) 13%, hsla(0, 0%, 100%, 0.15) 27%, hsla(0, 0%, 100%, 0.79) 68%, hsla(0, 0%, 100%, 0.95) 84%, #fff ); background: linear-gradient( to top, var( --vkui--gradient_white, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.036) 13%, hsla(0, 0%, 100%, 0.15) 27%, hsla(0, 0%, 100%, 0.79) 68%, hsla(0, 0%, 100%, 0.95) 84%, #fff 100% ) ); } .vkuiGradient--md-black.vkuiGradient--to-top { background: linear-gradient( 180deg, transparent, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) ); background: linear-gradient( 180deg, transparent 0, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) ); background: linear-gradient( to bottom, var( --vkui--gradient_black, transparent 0, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100% ) ); } .vkuiGradient--md-black.vkuiGradient--to-bottom { background: linear-gradient( 0deg, transparent, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) ); background: linear-gradient( 0deg, transparent 0, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) ); background: linear-gradient( to top, var( --vkui--gradient_black, transparent 0, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100% ) ); } .vkuiSimpleCell { align-items: center; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: flex; min-height: 48px; padding-left: 16px; padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px); padding-right: 16px; padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px); text-decoration: none; white-space: nowrap; } .vkuiSimpleCell--mult { white-space: normal; } .vkuiSimpleCell--mult .vkuiSimpleCell__children { text-overflow: clip; } .vkuiSimpleCell__main { flex-grow: 1; max-width: 100%; min-width: 0; overflow: hidden; } .vkuiSimpleCell > .vkuiIcon { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); flex-shrink: 0; padding-bottom: 10px; padding-right: 12px; padding-top: 10px; } .vkuiSimpleCell > .vkuiIcon--28 { padding-right: 16px; } .vkuiSimpleCell__subhead { color: #6d7885; color: var(--text_subhead, var(--vkui--color_text_subhead)); } .vkuiSimpleCell__text { overflow: hidden; text-overflow: ellipsis; } .vkuiSimpleCell__extraSubtitle, .vkuiSimpleCell__subtitle { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiSimpleCell .vkuiSimpleCell__content { align-content: flex-start; align-items: center; display: flex; justify-content: space-between; max-width: 100%; } .vkuiSimpleCell:not(.vkuiSimpleCell--mult) .vkuiSimpleCell__content { justify-content: flex-start; } .vkuiSimpleCell__children { color: inherit; display: block; overflow: hidden; text-overflow: ellipsis; } .vkuiSimpleCell--mult .vkuiSimpleCell__children, .vkuiSimpleCell--mult .vkuiSimpleCell__subtitle { flex: 1 1 auto; } .vkuiSimpleCell__badge { color: #5c9ce6; color: #2688eb; color: var(--blue_200, var(--vkui--color_icon_accent)); display: inline-block; flex-grow: 0; flex-shrink: 0; } .vkuiSimpleCell__content > :not(:last-child) { margin-right: 4px; } .vkuiSimpleCell__indicator { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); min-width: 0; overflow: hidden; padding-left: 4px; text-overflow: ellipsis; white-space: nowrap; } .vkuiSimpleCell__after { align-items: center; color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); display: flex; flex-shrink: 0; } .vkuiSimpleCell__after > .vkuiIcon { padding-left: 8px; } .vkuiSimpleCell__after > .vkuiIcon:last-child { padding-right: 2px; } .vkuiSimpleCell__after .vkuiIconButton:last-child { margin-right: -12px; } .vkuiSimpleCell--ios .vkuiSimpleCell__indicator, .vkuiSimpleCell--ios .vkuiSimpleCell__main { padding-bottom: 11px; padding-top: 9px; } .vkuiSimpleCell--ios > .vkuiIcon--28 { padding-left: 4px; } .vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIcon--chevron_24 { color: #b8c1cc; color: var(--icon_tertiary, var(--vkui--color_icon_tertiary)); padding-left: 12px; padding-right: 4px; } .vkuiSimpleCell--ios .vkuiSimpleCell__after .vkuiIconButton:last-child { margin-right: -9px; } .vkuiSimpleCell--android .vkuiSimpleCell__indicator, .vkuiSimpleCell--android .vkuiSimpleCell__main, .vkuiSimpleCell--vkcom .vkuiSimpleCell__indicator, .vkuiSimpleCell--vkcom .vkuiSimpleCell__main { padding-bottom: 10px; padding-top: 11px; } .vkuiSimpleCell--sizeY-compact { min-height: 44px; } .vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__indicator, .vkuiSimpleCell--sizeY-compact .vkuiSimpleCell__main { padding-bottom: 10px; padding-top: 10px; } .vkuiFormItem > .vkuiSimpleCell { margin: 0 -16px; margin: 0 calc(var(--vkui--size_base_padding_horizontal--regular, 16px) * -1); } .vkuiSimpleCell__main > :not(:first-child) { margin-top: 2px; } .vkuiCell { position: relative; } .vkuiList--dragging .vkuiCell:not(.vkuiCell--dragging) { pointer-events: none; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .vkuiCell--dragging { background-color: #fff; background-color: var( --background_content, var(--vkui--color_background_modal) ); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); opacity: 0.8; z-index: 3; } .vkuiCell--selectable.vkuiCell--disabled { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiCell__checkbox, .vkuiCell__dragger { flex-shrink: 0; margin-right: 16px; position: relative; } .vkuiCell__dragger { z-index: 2; } .vkuiCell__content { max-width: 100%; min-width: 0; } .vkuiCell--removable .vkuiCell__content { flex-grow: 1; padding-left: 0; padding-right: 0; } .vkuiCell--ios .vkuiCell__dragger { margin-left: 12px; margin-right: 0; } .vkuiCell--ios .vkuiCell__checkbox { margin-right: 12px; } .vkuiFormItem > .vkuiCell { margin: 0 -16px; margin: 0 calc(var(--vkui--size_base_padding_horizontal--regular, 16px) * -1); } .vkuiCellCheckbox__icon { color: #b8c1cc; color: var(--icon_tertiary, var(--vkui--color_icon_tertiary)); } .vkuiCellCheckbox__icon, .vkuiCellCheckbox__input { display: none; } .vkuiCellCheckbox__icon--on { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiCellCheckbox__input:checked ~ .vkuiCellCheckbox__icon--on, .vkuiCellCheckbox__input:not(:checked) ~ .vkuiCellCheckbox__icon--off { display: block; } .vkuiCellDragger { color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); cursor: ns-resize; } .vkuiCellButton { background: transparent; border: none; box-sizing: border-box; cursor: pointer; margin: 0; padding-bottom: 0; padding-top: 0; text-align: left; text-decoration: none; width: 100%; } .vkuiFormItem .vkuiCellButton { box-sizing: initial; margin: 0 -16px; margin: 0 calc(var(--vkui--size_base_padding_horizontal--regular, 16px) * -1); width: 100%; } .vkuiCellButton[disabled] { opacity: 0.4; } .vkuiCellButton--centered { justify-content: center; text-align: center; } .vkuiCellButton--centered .vkuiSimpleCell__main { flex-grow: 0; max-width: none; } .vkuiCellButton--centered > .vkuiIcon { padding-right: 8px; } .vkuiCellButton { color: #2688eb; color: var(--accent, var(--vkui--color_text_accent)); } .vkuiCellButton > .vkuiIcon { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiCellButton--danger { color: #e64646; color: var(--destructive, var(--vkui--color_text_negative)); } .vkuiCellButton--danger > .vkuiIcon { color: #e64646; color: var(--destructive, var(--vkui--color_icon_negative)); } .vkuiRichCell { box-sizing: border-box; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: flex; min-height: 64px; padding: 8px 16px; padding: 8px var(--vkui--size_base_padding_horizontal--regular, 16px); text-decoration: none; } .vkuiRichCell--sizeY-compact { min-height: 60px; } .vkuiRichCell__before { margin-right: 12px; } .vkuiRichCell__in { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; max-width: 100%; min-width: 0; } .vkuiRichCell__content { display: flex; } .vkuiRichCell__content-before { flex-grow: 1; min-width: 0; } .vkuiRichCell__content-after { align-items: flex-end; box-sizing: border-box; display: flex; flex-direction: column; flex-shrink: 0; padding-left: 4px; } .vkuiRichCell__content-after .vkuiIcon { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiRichCell__after-children { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiRichCell__after-caption { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); font-size: 13px; font-size: var(--vkui--font_footnote--font_size--regular, 13px); line-height: 16px; line-height: var(--vkui--font_footnote--line_height--regular, 16px); margin-top: 2px; } .vkuiRichCell--sizeY-compact .vkuiRichCell__after-caption { font-size: 12px; font-size: var(--vkui--font_caption1--font_size--regular, 12px); line-height: 14px; line-height: var(--vkui--font_caption1--line_height--regular, 14px); } .vkuiRichCell__caption, .vkuiRichCell__subhead { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiRichCell__caption { margin-top: 1px; } .vkuiRichCell__children { font-weight: 500; font-weight: var(--vkui--font_weight_accent2, 500); } .vkuiRichCell--text-ellipsis .vkuiRichCell__caption, .vkuiRichCell--text-ellipsis .vkuiRichCell__children, .vkuiRichCell--text-ellipsis .vkuiRichCell__subhead, .vkuiRichCell--text-ellipsis .vkuiRichCell__text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiRichCell__bottom { margin-top: 5px; } .vkuiRichCell__actions { display: flex; margin-top: 8px; } .vkuiRichCell__after-children, .vkuiRichCell__children, .vkuiRichCell__text { font-size: 15px; font-size: var(--vkui--font_paragraph--font_size--regular, 15px); line-height: 20px; line-height: var(--vkui--font_paragraph--line_height--regular, 20px); } .vkuiRichCell--sizeY-compact .vkuiRichCell__after-children, .vkuiRichCell--sizeY-compact .vkuiRichCell__children, .vkuiRichCell--sizeY-compact .vkuiRichCell__text { font-size: 14px; font-size: var(--vkui--font_subhead--font_size--regular, 14px); line-height: 18px; line-height: var(--vkui--font_subhead--line_height--regular, 18px); } .vkuiFormItem .vkuiRichCell { margin-left: -16px; margin-left: calc( var(--vkui--size_base_padding_horizontal--regular, 16px) * -1 ); margin-right: -16px; margin-right: calc( var(--vkui--size_base_padding_horizontal--regular, 16px) * -1 ); } .vkuiHorizontalCell { display: flex; } .vkuiHorizontalCell__image { display: flex; justify-content: center; } .vkuiHorizontalCell__body { text-decoration: none; } .vkuiHorizontalCell__content { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); text-overflow: ellipsis; word-break: break-all; } .vkuiHorizontalCell__subtitle { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiHorizontalCell__content .vkuiHorizontalCell__subtitle { margin-top: 2px; } .vkuiHorizontalCell--s { max-width: 80px; } .vkuiHorizontalCell__image { padding: 4px 6px; } .vkuiHorizontalCell__content { padding: 2px 6px 8px; text-align: left; } .vkuiHorizontalCell--s .vkuiHorizontalCell__image { padding: 4px 8px; } .vkuiHorizontalCell--s .vkuiHorizontalCell__content { padding: 2px 4px 8px; text-align: center; } .vkuiHorizontalCell--m { width: 100px; } .vkuiHorizontalCell--l { width: auto; } .vkuiHorizontalCell:first-child:before, .vkuiHorizontalCell:last-child:after { content: ""; min-width: 10px; } .vkuiHorizontalCell--s:first-child:before, .vkuiHorizontalCell--s:last-child:after { min-width: 8px; } .vkuiHorizontalCell--s:first-child, .vkuiHorizontalCell--s:last-child { max-width: 88px; } .vkuiHorizontalCell--m:first-child, .vkuiHorizontalCell--m:last-child { width: 110px; } .vkuiFooter { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); display: block; margin: 24px 16px; margin: 24px var(--vkui--size_base_padding_horizontal--regular, 16px); padding-bottom: 0; padding-top: 0; text-align: center; } .vkuiSpinner { align-items: center; color: #99a2ad; color: var(--icon_outline_secondary, var(--vkui--color_icon_medium)); display: flex; height: 100%; justify-content: center; width: 100%; } .vkuiSpinner__self { -webkit-animation: vkui-rotator 0.7s linear infinite; animation: vkui-rotator 0.7s linear infinite; -webkit-animation: vkui-rotator var(--duration) linear infinite; animation: vkui-rotator var(--duration) linear infinite; -webkit-transform-origin: center; transform-origin: center; } .vkuiSpinner__self svg { -webkit-transform: scale(1); transform: scale(1); } .vkuiButton .vkuiSpinner, .vkuiPanelHeader .vkuiSpinner { color: currentColor; } .vkuiSwitch { cursor: pointer; display: block; padding: 3px; padding: calc( ( var(--vkui--size_switch_pin--regular, 20px) - var(--vkui--size_switch_height--regular, 14px) ) / 2 ); position: relative; } .vkuiSwitch--sizeY-compact { padding: 3px; padding: calc( ( var(--vkui--size_switch_pin--compact, 18px) - var(--vkui--size_switch_height--compact, 12px) ) / 2 ); } .vkuiSwitch--disabled { cursor: default; } .vkuiSwitch__pseudo { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; box-sizing: border-box; display: block; position: relative; } .vkuiSwitch__pseudo:before { background: #f2f3f5; background: var(--vkui--color_icon_contrast_secondary, #f2f3f5); border-radius: 50%; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24); box-sizing: border-box; content: ""; height: 20px; height: var(--vkui--size_switch_pin--regular, 20px); left: -3px; left: calc( ( var(--vkui--size_switch_height--regular, 14px) - var(--vkui--size_switch_pin--regular, 20px) ) / 2 ); position: absolute; top: -3px; top: calc( ( var(--vkui--size_switch_height--regular, 14px) - var(--vkui--size_switch_pin--regular, 20px) ) / 2 ); width: 20px; width: var(--vkui--size_switch_pin--regular, 20px); } .vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:before { height: 18px; height: var(--vkui--size_switch_pin--compact, 18px); left: -3px; left: calc( ( var(--vkui--size_switch_height--compact, 12px) - var(--vkui--size_switch_pin--compact, 18px) ) / 2 ); top: -3px; top: calc( ( var(--vkui--size_switch_height--compact, 12px) - var(--vkui--size_switch_pin--compact, 18px) ) / 2 ); width: 18px; width: var(--vkui--size_switch_pin--compact, 18px); } .vkuiSwitch__self:checked + .vkuiSwitch__pseudo:before { background: #2688eb; background: var(--accent, var(--vkui--color_icon_accent)); -webkit-transform: translateX(20px); transform: translateX(20px); -webkit-transform: translateX( calc( var(--vkui--size_switch_width--regular, 34px) - var(--vkui--size_switch_height--regular, 14px) ) ); transform: translateX( calc( var(--vkui--size_switch_width--regular, 34px) - var(--vkui--size_switch_height--regular, 14px) ) ); } .vkuiSwitch__pseudo:after { background: rgba(0, 0, 0, 0.24); background: var(--vkui--color_icon_tertiary_alpha, rgba(0, 0, 0, 0.24)); border-radius: 17px; border-radius: calc(var(--vkui--size_switch_width--regular, 34px) / 2); content: ""; display: block; height: 14px; height: var(--vkui--size_switch_height--regular, 14px); width: 34px; width: var(--vkui--size_switch_width--regular, 34px); } .vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:after { border-radius: 16px; border-radius: calc(var(--vkui--size_switch_width--compact, 32px) / 2); height: 12px; height: var(--vkui--size_switch_height--compact, 12px); width: 32px; width: var(--vkui--size_switch_width--compact, 32px); } .vkuiSwitch__self:checked + .vkuiSwitch__pseudo:after { background: #2688eb; background: var(--accent, var(--vkui--color_icon_accent)); opacity: 0.48; } .vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked + .vkuiSwitch__pseudo:before { -webkit-transform: translateX(20px); transform: translateX(20px); -webkit-transform: translateX( calc( var(--vkui--size_switch_width--compact, 32px) - var(--vkui--size_switch_height--compact, 12px) ) ); transform: translateX( calc( var(--vkui--size_switch_width--compact, 32px) - var(--vkui--size_switch_height--compact, 12px) ) ); } .vkuiSwitch__self[disabled] + .vkuiSwitch__pseudo { opacity: 0.4; opacity: var(--vkui--opacity_disable, 0.4); } .vkuiSwitch--ios .vkuiSwitch__pseudo:before { background: #fff; background: var(--white); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06), inset 0 0 0 0.5px rgba(0, 0, 0, 0.04); } .vkuiSwitch--ios .vkuiSwitch__self:checked + .vkuiSwitch__pseudo:before { background: #fff; background: var(--white); } .vkuiSwitch--ios .vkuiSwitch__pseudo:after { background: rgba(0, 28, 61, 0.08); background: var( --placeholder_icon_background, var(--vkui--color_track_background) ); } .vkuiSwitch--ios .vkuiSwitch__self:checked + .vkuiSwitch__pseudo:after { opacity: 1; } @media (prefers-reduced-motion: no-preference) { .vkuiSwitch__pseudo:after { transition: background-color 0.1s ease; } .vkuiSwitch__pseudo:before { transition: -webkit-transform 0.1s ease; transition: transform 0.1s ease; transition: transform 0.1s ease, -webkit-transform 0.1s ease; } .vkuiSwitch--ios .vkuiSwitch__pseudo:after { transition: background-color 0.2s ease; } .vkuiSwitch--ios .vkuiSwitch__pseudo:before { transition: -webkit-transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32); transition: transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32); transition: transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32), -webkit-transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32); } } .vkuiSimpleCell__after > .vkuiSwitch { margin-left: 12px; } .vkuiSimpleCell > .vkuiSwitch:first-child { margin-right: 12px; } .vkuiInfoRow { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .vkuiInfoRow, .vkuiInfoRow__header { overflow: hidden; text-overflow: ellipsis; } .vkuiInfoRow__header { color: #6d7885; color: var(--text_subhead, var(--vkui--color_text_subhead)); display: block; margin-bottom: 2px; white-space: nowrap; } .vkuiAvatar { background: currentColor; background-size: cover; box-sizing: border-box; color: rgba(0, 28, 61, 0.08); color: var(--placeholder_icon_background, var(--vkui--color_background)); flex-shrink: 0; position: relative; } .vkuiAvatar--failed .vkuiAvatar__img { visibility: hidden; } .vkuiAvatar__img { border: none; border-radius: inherit; display: block; height: 100%; object-fit: cover; position: relative; width: 100%; } .vkuiAvatar--shadow:after, .vkuiAvatar__badge--shadow:before, .vkuiAvatar__children { border-radius: inherit; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .vkuiAvatar--shadow:after { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 0 var(--thin-border) rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 0 var(--thin-border) var(--image_border, var(--vkui--color_image_border_alpha)); content: ""; } .vkuiAvatar__overlay { align-items: center; border: none; border-radius: inherit; display: flex; height: 100%; justify-content: center; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity 0.3s; width: 100%; z-index: 1; } .vkuiAvatar__overlay--light { background-color: hsla(0, 0%, 100%, 0.85); background-color: var( --vkui--color_avatar_overlay_inverse_alpha, hsla(0, 0%, 100%, 0.85) ); color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiAvatar__overlay--dark { background-color: rgba(0, 0, 0, 0.6); background-color: var(--vkui--color_avatar_overlay, rgba(0, 0, 0, 0.6)); color: #fff; color: var(--button_commerce_foreground, var(--vkui--color_icon_contrast)); } .vkuiAvatar__overlay--visible { opacity: 1; } .vkuiAvatar__overlay--focus-visible { box-shadow: 0 0 0 2px #2688eb; box-shadow: 0 0 0 2px var(--accent, var(--vkui--color_stroke_accent)); opacity: 1; } .vkuiAvatar__children { align-items: center; color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); display: flex; justify-content: center; } .vkuiAvatar__badge { bottom: calc(14% - 1px); position: absolute; right: calc(14% - 1px); -webkit-transform: translate(50%, 50%); transform: translate(50%, 50%); z-index: 1; } .vkuiAvatar__badge--large { bottom: 14%; right: 14%; } .vkuiAvatar__badge--shadow:before { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.06); box-shadow: var( --vkui--elevation1, 0 0 2px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.06) ); content: ""; } .vkuiAvatar__badge-online { border-radius: 50%; } .vkuiAvatar__badge-online, .vkuiAvatar__badge-online-mobile { background-color: #fff; background-color: var( --background_content, var(--vkui--color_background_content) ); color: #4bb34b; color: var(--button_commerce_background, var(--vkui--color_accent_green)); } .vkuiAvatar__badge-online-mobile { border-radius: 3px; padding: 2px; } .vkuiCellButton > .vkuiAvatar .vkuiIcon { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiCellButton--danger > .vkuiAvatar .vkuiIcon { color: #e64646; color: var(--destructive, var(--vkui--color_icon_negative)); } .vkuiPanelHeader__before .vkuiAvatar { margin-left: 8px; } .vkuiPanelHeader__after .vkuiAvatar { margin-right: 8px; } .vkuiSimpleCell > .vkuiAvatar { margin-right: 12px; } .vkuiSimpleCell > .vkuiAvatar--sz-28, .vkuiSimpleCell > .vkuiAvatar--sz-32 { margin-bottom: 10px; margin-top: 10px; } .vkuiSimpleCell > .vkuiAvatar--sz-40 { margin-bottom: 4px; margin-top: 4px; } .vkuiSimpleCell > .vkuiAvatar--sz-48, .vkuiSimpleCell > .vkuiAvatar--sz-72 { margin-bottom: 6px; margin-top: 6px; } .vkuiSimpleCell--ios > .vkuiAvatar--sz-28, .vkuiSimpleCell--ios > .vkuiAvatar--sz-32 { margin-left: 4px; } .vkuiSimpleCell--sizeY-compact > .vkuiAvatar--sz-28, .vkuiSimpleCell--sizeY-compact > .vkuiAvatar--sz-32 { margin-bottom: 8px; margin-top: 8px; } .vkuiSimpleCell--sizeY-compact > .vkuiAvatar--sz-40 { margin-bottom: 2px; margin-top: 2px; } .vkuiSimpleCell--sizeY-compact > .vkuiAvatar--sz-48 { margin-bottom: 4px; margin-top: 4px; } .vkuiInitialsAvatar { background-color: #99a2ad; background-image: linear-gradient(135deg, #b1b6bd, #99a2ad); } .vkuiInitialsAvatar--color-red { background-color: #e52e40; background-image: linear-gradient(135deg, #ff7583, #e52e40); } .vkuiInitialsAvatar--color-pink { background-color: #e62e6b; background-image: linear-gradient(135deg, #ff8880, #e62e6b); } .vkuiInitialsAvatar--color-orange { background-color: #e66b2e; background-image: linear-gradient(135deg, #ffbf80, #e66b2e); } .vkuiInitialsAvatar--color-yellow { background-color: #e7a902; background-image: linear-gradient(135deg, #ffd54f, #e7a902); } .vkuiInitialsAvatar--color-green { background-color: #6cd97e; background-image: linear-gradient(135deg, #6cd97e, #12b212); } .vkuiInitialsAvatar--color-l-blue { background-color: #2bb4d6; background-image: linear-gradient(135deg, #7df1fa, #2bb4d6); } .vkuiInitialsAvatar--color-blue { background-color: #3f8ae0; background-image: linear-gradient(135deg, #6cf, #3f8ae0); } .vkuiInitialsAvatar--color-violet { background-color: #8f3fe0; background-image: linear-gradient(135deg, #d3a6ff, #8f3fe0); } .vkuiInitialsAvatar__text { color: #fff; color: var(--white, var(--vkui--color_text_contrast)); font-family: VK Sans Display, -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-display); font-weight: 600; text-align: center; text-transform: uppercase; } .vkuiGridAvatar__in { --grid-avatar-image-offset: 2px; border-radius: inherit; display: flex; flex-flow: column wrap; height: 100%; overflow: hidden; width: 100%; } .vkuiGridAvatar__item { background-position: 50%; background-size: cover; height: calc(50% - var(--grid-avatar-image-offset) / 2); margin-right: var(--grid-avatar-image-offset); width: calc(50% - var(--grid-avatar-image-offset) / 2); } .vkuiGridAvatar__item:only-child { width: 100%; } .vkuiGridAvatar__item:first-child:not(:nth-last-child(4)), .vkuiGridAvatar__item:nth-child(2):last-child { height: 100%; } .vkuiGridAvatar__item:nth-last-child(4), .vkuiGridAvatar__item:nth-last-child(n + 3) ~ .vkuiGridAvatar__item:nth-last-child(2) { margin-bottom: var(--grid-avatar-image-offset); } .vkuiGallery { overflow: hidden; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vkuiGallery__viewport { height: 100%; margin: 0; position: relative; } .vkuiGallery--center .vkuiGallery__viewport { margin: 0 auto; } .vkuiGallery__layer { align-items: stretch; display: flex; height: 100%; min-height: 100px; width: 100%; } .vkuiGallery--draggable .vkuiGallery__layer { cursor: -webkit-grab; cursor: grab; } .vkuiGallery__layer:empty { min-height: 0; } .vkuiGallery__slide { flex: 0 0 auto; max-width: 100%; overflow: hidden; width: 100%; } .vkuiGallery--custom-width .vkuiGallery__slide { width: auto; } .vkuiGallery__slide > * { min-height: 100%; width: 100%; } .vkuiGallery__bullets { align-items: center; bottom: 10px; display: flex; height: 6px; justify-content: center; left: 0; position: absolute; width: 100%; } .vkuiGallery__bullets--dark .vkuiGallery__bullet { background-color: #2c2d2e; background-color: var(--vkui--color_icon_primary_invariably, #2c2d2e); } .vkuiGallery__bullets--light .vkuiGallery__bullet { background-color: #fff; background-color: var(--vkui--color_icon_contrast, #fff); } .vkuiGallery__bullet { border-radius: 50%; height: 6px; margin: 0 3px; opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); width: 6px; } .vkuiGallery__bullet--active { opacity: 1; } .vkuiProgress { background: #e1e3e6; background: var(--loader_track_fill, var(--vkui--color_track_background)); border-radius: 1px; height: 2px; } .vkuiProgress__in { background: #2688eb; background: var(--accent, var(--vkui--color_stroke_accent)); border-radius: inherit; height: 100%; transition: width 0.2s ease; } .vkuiSearch { font-family: -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-common); font-weight: 400; line-height: normal; overflow: hidden; padding: 8px 16px; padding: 8px var(--vkui--size_base_padding_horizontal--regular, 16px); -webkit-transform: translateZ(0); transform: translateZ(0); } .vkuiSearch__in { position: relative; } .vkuiSearch__width { color: transparent; white-space: nowrap; width: 10000px; } .vkuiSearch__control { align-items: center; border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); display: flex; height: 100%; justify-content: flex-start; left: 0; position: absolute; top: 0; width: calc(100% - 1px); } .vkuiSearch__input { -webkit-appearance: none; background-color: initial; border: none; border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-sizing: border-box; flex-grow: 1; font-size: 17px; margin: 0; max-width: 100%; min-width: 0; padding: 0 22px 0 36px; position: relative; z-index: 2; } .vkuiSearch__input::-webkit-search-cancel-button, .vkuiSearch__input::-webkit-search-decoration, .vkuiSearch__input::-webkit-search-results-button, .vkuiSearch__input::-webkit-search-results-decoration { display: none; } .vkuiSearch--has-after .vkuiSearch__input { border-bottom-right-radius: 0; border-top-right-radius: 0; } .vkuiSearch--has-icon .vkuiSearch__input, .vkuiSearch--has-icon .vkuiSearch__placeholder, .vkuiSearch--has-value .vkuiSearch__input, .vkuiSearch--has-value .vkuiSearch__placeholder { padding-right: 40px; } .vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input, .vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__placeholder { padding-right: 80px; } .vkuiSearch__after-width { cursor: text; flex-shrink: 0; font-size: 17px; padding-left: 12px; padding-right: 4px; pointer-events: none; } .vkuiSearch__placeholder { box-sizing: border-box; cursor: text; display: flex; font-size: 0; left: 0; padding-left: 12px; padding-right: 22px; pointer-events: none; position: absolute; text-align: left; width: 100%; z-index: 1; } .vkuiSearch__placeholder-in { align-items: center; display: flex; flex-grow: 1; max-width: 100%; overflow: hidden; } .vkuiSearch__placeholder-text { color: #818c99; color: var(--vkui--color_text_secondary, #818c99); margin-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiSearch--has-value .vkuiSearch__placeholder-text { opacity: 0; } .vkuiSearch__icons { color: #818c99; color: var(--search_bar_field_tint, var(--vkui--color_icon_secondary)); position: absolute; right: 100%; top: 0; } .vkuiSearch__icon, .vkuiSearch__icons { align-items: center; display: flex; justify-content: center; } .vkuiSearch__icon { cursor: pointer; width: 40px; } .vkuiSearch__after { cursor: default; left: 100%; position: absolute; top: 0; -webkit-transform: translate(0); transform: translate(0); transition: -webkit-transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.3s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.3s var(--ios-easing); transition: transform 0.3s var(--ios-easing); transition: transform 0.3s var(--ios-easing), -webkit-transform 0.3s var(--ios-easing); z-index: 2; } .vkuiSearch--focused .vkuiSearch__after, .vkuiSearch--has-value .vkuiSearch__after { -webkit-transform: translate(-100%); transform: translate(-100%); } .vkuiSearch__after:before { content: ""; display: block; height: 100%; pointer-events: none; position: absolute; right: calc(100% - 1px); width: 10px; } .vkuiSearch__after-in { cursor: pointer; font-size: 17px; padding-left: 12px; padding-right: 4px; position: relative; z-index: 2; } .vkuiSearch__after:after { border-radius: 0 8px 8px 0; border-radius: 0 var(--vkui--size_border_radius--regular, 8px) var(--vkui--size_border_radius--regular, 8px) 0; content: ""; cursor: text; display: block; height: 100%; pointer-events: none; position: absolute; right: 100%; top: 0; width: 10px; } .vkuiGroup--plain .vkuiSearch { padding-top: 4px; } .vkuiSearch__after-width, .vkuiSearch__icon, .vkuiSearch__input, .vkuiSearch__placeholder, .vkuiSearch__placeholder-in, .vkuiSearch__width { height: 32px; height: var(--vkui--size_search_height--compact, 32px); } .vkuiSearch__after, .vkuiSearch__after-width { line-height: 32px; line-height: var(--vkui--size_search_height--compact, 32px); } .vkuiSearch--sizeY-regular .vkuiSearch__after-width, .vkuiSearch--sizeY-regular .vkuiSearch__icon, .vkuiSearch--sizeY-regular .vkuiSearch__input, .vkuiSearch--sizeY-regular .vkuiSearch__placeholder, .vkuiSearch--sizeY-regular .vkuiSearch__placeholder-in, .vkuiSearch--sizeY-regular .vkuiSearch__width { height: 36px; height: var(--vkui--size_search_height--regular, 36px); } .vkuiSearch--sizeY-regular .vkuiSearch__after, .vkuiSearch--sizeY-regular .vkuiSearch__after-width { line-height: 36px; line-height: var(--vkui--size_search_height--regular, 36px); } .vkuiSearch { background: #fff; background: var( --search_bar_background, var(--vkui--color_background_content) ); } .vkuiSearch__control { background-color: #ebedf0; background-color: var( --search_bar_field_background, var(--vkui--color_search_field_background) ); } .vkuiSearch__in:hover .vkuiSearch__after-width, .vkuiSearch__in:hover .vkuiSearch__after:after, .vkuiSearch__in:hover .vkuiSearch__control { background-color: #e2e4e9; background-color: var(--vkui--color_search_field_background--hover, #e2e4e9); } .vkuiSearch__in:hover .vkuiSearch__after-width { color: #e2e4e9; color: var(--vkui--color_search_field_background--hover, #e2e4e9); } .vkuiSearch__in:active .vkuiSearch__after-width, .vkuiSearch__in:active .vkuiSearch__after:after, .vkuiSearch__in:active .vkuiSearch__control { background-color: #d8dbe2; background-color: var(--vkui--color_search_field_background--active, #d8dbe2); } .vkuiSearch__in:active .vkuiSearch__after-width { color: #d8dbe2; color: var(--vkui--color_search_field_background--active, #d8dbe2); } .vkuiSearch__input { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiSearch__placeholder { color: #818c99; color: var(--search_bar_field_tint, var(--vkui--color_icon_medium)); } .vkuiSearch__after-width { background: #ebedf0; background: var( --search_bar_field_background, var(--vkui--color_search_field_background) ); color: #ebedf0; color: var( --search_bar_field_background, var(--vkui--color_search_field_background) ); } .vkuiSearch__after { background: #fff; background: var( --search_bar_background, var(--vkui--color_background_content) ); color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent_themed)); } .vkuiSearch__after:after { background-color: #ebedf0; background-color: var( --search_bar_field_background, var(--vkui--color_search_field_background) ); } .vkuiSearch__after:before { background-color: #fff; background-color: var( --search_bar_background, var(--vkui--color_background_content) ); } .vkuiPanelHeader .vkuiSearch { background: #fff; background: var(--header_background, var(--vkui--color_header_background)); } .vkuiPanelHeader .vkuiSearch__control { background-color: #ebedf0; background-color: var( --header_search_field_background, var(--vkui--color_search_field_background) ); } .vkuiPanelHeader .vkuiSearch__input { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiPanelHeader .vkuiSearch__placeholder { color: #818c99; color: var(--header_search_field_tint, var(--vkui--color_icon_secondary)); } .vkuiPanelHeader .vkuiSearch__after-width { background: #ebedf0; background: var( --header_search_field_background, var(--vkui--color_search_field_background) ); color: #ebedf0; color: var( --header_search_field_background, var(--vkui--color_search_field_background) ); } .vkuiPanelHeader .vkuiSearch__after { background: #fff; background: var(--header_background, var(--vkui--color_header_background)); color: #2688eb; color: var(--header_tint, var(--vkui--color_icon_accent_themed)); } .vkuiPanelHeader .vkuiSearch__after:after { background-color: #ebedf0; background-color: var( --header_search_field_background, var(--vkui--color_search_field_background) ); } .vkuiPanelHeader .vkuiSearch__after:before { background-color: #fff; background-color: var( --header_background, var(--vkui--color_header_background) ); } .vkuiSearch--vkcom { padding: initial; } .vkuiPanelHeader--vkcom .vkuiSearch, .vkuiSearch--vkcom, .vkuiSearch--vkcom .vkuiSearch__in:active .vkuiSearch__control, .vkuiSearch--vkcom .vkuiSearch__in:hover .vkuiSearch__control { background: transparent; } .vkuiSearch--vkcom .vkuiSearch__in { padding-bottom: 6px; padding-top: 6px; } .vkuiSearch--vkcom .vkuiSearch__input { font-size: 15px; line-height: 20px; padding-left: 40px; } .vkuiSearch--vkcom .vkuiSearch__placeholder { color: #99a2ad; color: var(--vkui--color_icon_secondary, #99a2ad); padding-left: 16px; } .vkuiSearch--vkcom .vkuiSearch__icons { color: #818c99; color: var(--search_bar_field_tint, var(--vkui--color_icon_medium)); right: calc(100% + 8px); top: 4px; } .vkuiSearch--vkcom.vkuiSearch--has-value .vkuiSearch__input { padding-right: 56px; } .vkuiSearch--vkcom.vkuiSearch--has-icon.vkuiSearch--has-value .vkuiSearch__input { padding-right: 92px; } .vkuiSearch--vkcom .vkuiSearch__icon { height: 40px; opacity: 0.8; width: 40px; } .vkuiSearch--vkcom .vkuiSearch__icon:hover { background-color: rgba(0, 0, 0, 0.04); background-color: var( --background_hover, var(--vkui--color_background_secondary_alpha--hover) ); border-radius: 50%; } .vkuiSearch--vkcom .vkuiSearch__control { background-color: initial; } .vkuiPanelHeader--vkcom .vkuiSearch__separator { display: none; } .vkuiSearch--vkcom .vkuiSearch__separator { color: #e1e3e6; color: var(--input_border, var(--vkui--color_separator_primary)); } .vkuiGroup--card .vkuiSearch--vkcom { margin: 0 -8px; } .vkuiGroup--card .vkuiSearch--vkcom:first-child { margin-top: -8px; } .vkuiGroup--card .vkuiSearch--vkcom:not(:last-child) { margin-bottom: 8px; } .vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__placeholder { padding-left: 20px; } .vkuiGroup--card .vkuiSearch--vkcom .vkuiSearch__input { padding-left: 44px; } .vkuiTabs__in { align-items: stretch; display: flex; } .vkuiTabs--withGaps { justify-content: flex-start; } .vkuiTabs--ios.vkuiTabs--segmented { padding: 4px 12px 8px; } .vkuiPanelHeader .vkuiTabs { font-family: -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-common); overflow: hidden; } .vkuiPanelHeader .vkuiTabs:after { content: ""; display: block; width: 1000px; } .vkuiGroup--plain > .vkuiTabs--default:first-child { margin-top: -8px; } .vkuiGroup--card > .vkuiTabs--default:first-child { margin-top: -4px; } .vkuiFixedLayout--ios.vkuiFixedLayout--bottom .vkuiTabs:after { background: #fff; background: var(--background_content, var(--vkui--color_background_content)); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .vkuiFixedLayout--ios.vkuiFixedLayout--bottom .vkuiSeparator, .vkuiFixedLayout--ios.vkuiFixedLayout--bottom .vkuiTabs__in { position: relative; z-index: 2; } .vkuiTabsItem { align-items: center; border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-sizing: border-box; display: flex; justify-content: center; max-width: 100%; min-height: 32px; min-width: 0; padding: 4px 8px; transition: background-color 0.15s ease-out; } .vkuiTabsItem--withGaps { margin-bottom: 8px; margin-top: 8px; } .vkuiTabsItem--withGaps:not(:first-of-type) { margin-left: 6px; } .vkuiTabsItem--sizeY-compact { min-height: 28px; padding-bottom: 2px; padding-top: 2px; } .vkuiTabsItem[disabled] { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiTabsItem--default { flex-basis: 0; flex-grow: 1; flex-shrink: 0; min-height: 48px; padding: 12px 16px; position: relative; } .vkuiTabsItem--sizeY-compact.vkuiTabsItem--default { min-height: 44px; padding-bottom: 10px; padding-top: 10px; } .vkuiTabsItem--hover.vkuiTabsItem--default { background-color: rgba(0, 16, 61, 0.04); background-color: var( --vkui--color_transparent--hover, rgba(0, 16, 61, 0.04) ); } .vkuiTabsItem--accent { transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out; } .vkuiTabsItem--selected.vkuiTabsItem--accent { background-color: #fff; background-color: var( --header_alternate_background, var(--vkui--color_background_modal) ); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.06); box-shadow: var( --vkui--elevation2, 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 4px rgba(0, 0, 0, 0.06) ); } .vkuiTabsItem--hover.vkuiTabsItem--accent { background-color: #ebedf0; background-color: var( --control_background, var(--vkui--color_background_secondary) ); } .vkuiTabsItem--accent:before { border: 1px solid transparent; border: var(--thin-border) solid transparent; border-radius: inherit; bottom: 0; content: ""; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; } .vkuiTabsItem--selected.vkuiTabsItem--accent:before { border-color: #d7d8d9; border-color: var(--separator_common, var(--vkui--color_separator_primary)); } .vkuiTabsItem--selected.vkuiTabsItem--secondary { background-color: rgba(0, 0, 0, 0.04); background-color: var( --vkui--color_background_secondary_alpha, rgba(0, 0, 0, 0.04) ); } .vkuiTabsItem--hover.vkuiTabsItem--secondary { background-color: rgba(0, 0, 0, 0.08); background-color: var( --vkui--color_background_secondary_alpha--hover, rgba(0, 0, 0, 0.08) ); } .vkuiTabsItem__before { color: #818c99; color: var(--icon_outline_medium, var(--vkui--color_icon_medium)); margin-right: 6px; transition: color 0.15s ease-out; } .vkuiTabsItem--selected .vkuiTabsItem__before { color: #2c2d2e; color: var(--vkui--color_icon_primary, #2c2d2e); } .vkuiTabsItem--selected.vkuiTabsItem--accent .vkuiTabsItem__before { color: #2688eb; color: var( --button_secondary_foreground, var(--vkui--color_icon_accent_themed) ); } .vkuiTabsItem--selected.vkuiTabsItem--secondary .vkuiTabsItem__before { opacity: 0.72; } .vkuiTabsItem__label { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s ease-out; white-space: nowrap; } .vkuiTabsItem--selected .vkuiTabsItem__label { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiTabsItem--selected.vkuiTabsItem--accent .vkuiTabsItem__label { color: #2688eb; color: var( --button_secondary_foreground, var(--vkui--color_text_accent_themed) ); } .vkuiTabsItem--selected.vkuiTabsItem--secondary .vkuiTabsItem__label { opacity: 0.72; } .vkuiTabsItem__status { margin-left: 6px; } .vkuiTabsItem__status--count { color: #99a2ad; color: var(--text_tertiary, var(--vkui--color_text_tertiary)); } .vkuiTabsItem__after { color: #2688eb; color: var(--header_tint_alternate, var(--vkui--color_icon_accent_themed)); margin-left: 6px; } .vkuiTabsItem--selected.vkuiTabsItem--accent .vkuiTabsItem__after { color: #2688eb; color: var( --button_secondary_foreground, var(--vkui--color_icon_accent_themed) ); } .vkuiTabsItem__underline { background-color: #2688eb; background-color: var(--accent, var(--vkui--color_background_accent)); border-radius: 2px; bottom: 5px; height: 2px; left: 16px; opacity: 0; pointer-events: none; position: absolute; right: 16px; transition: opacity 0.15s ease-out; } .vkuiTabsItem--sizeY-compact .vkuiTabsItem__underline { bottom: 3px; } .vkuiTabsItem__underline[data-selected="true"] { opacity: 1; } .vkuiTabs--vkcom .vkuiTabsItem { flex-grow: 0; min-width: auto; padding-left: 10px; padding-right: 10px; } .vkuiTabs--vkcom .vkuiTabsItem__underline { bottom: 0; left: 2px; right: 2px; } .vkuiHorizontalScroll .vkuiTabsItem { flex-basis: auto; flex-grow: 1; flex-shrink: 0; min-width: 64px; } .vkuiTabsItem--ios.vkuiTabsItem--segmented { border: 1px solid #99a2ad; border: 1px solid var(--segmented_control_tint); border-radius: 0; flex-basis: 0; flex-grow: 1; flex-shrink: 0; max-width: 100%; padding: 7px 12px; } .vkuiTabsItem--ios.vkuiTabsItem--segmented:not(:first-child) { border-left: none; } .vkuiTabsItem--ios.vkuiTabsItem--segmented:first-child { border-bottom-left-radius: 10px; border-top-left-radius: 10px; } .vkuiTabsItem--ios.vkuiTabsItem--segmented:last-child { border-bottom-right-radius: 10px; border-top-right-radius: 10px; } .vkuiTabsItem--ios.vkuiTabsItem--segmented.vkuiTabsItem--selected { background-color: #99a2ad; background-color: var(--segmented_control_tint); color: #fff; color: var(--background_content); } .vkuiTabsItem--ios.vkuiTabsItem--segmented:not( .vkuiTabsItem--selected ).vkuiTabsItem--active { background-color: #d7d8d9; background-color: var(--separator_common); } .vkuiTabs--header .vkuiTabsItem--ios.vkuiTabsItem--segmented.vkuiTabsItem--selected { background-color: #2688eb; background-color: var(--header_tint_alternate); color: #fff; color: var(--header_background); } .vkuiTabsItem--ios.vkuiTabsItem--segmented .vkuiTabsItem__label { color: #99a2ad; color: var(--segmented_control_tint); } .vkuiTabsItem--ios.vkuiTabsItem--segmented.vkuiTabsItem--selected .vkuiTabsItem__label { color: #fff; color: var(--background_content); } .vkuiPanelHeader--ios .vkuiTabsItem--segmented:not(.vkuiTabsItem--selected).vkuiTabsItem--active .vkuiTabsItem__label { opacity: 0.7; } .vkuiPanelHeader--ios .vkuiTabsItem--segmented { border-color: #2688eb; border-color: var(--header_tint_alternate); color: #2688eb; color: var(--header_tint_alternate); } .vkuiTooltip { height: 100%; left: 0; top: 0; white-space: normal; width: 100%; z-index: 2; } .vkuiTooltip, .vkuiTooltip__container { position: absolute; } .vkuiTooltip__content { background-color: #fff; background-color: var(--vkui--color_background_modal, #fff); border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); color: #000; color: var(--vkui--color_text_primary, #000); max-width: 220px; padding: 9px 12px 10px; } .vkuiTooltip__arrow { color: #fff; color: var(--vkui--color_background_modal, #fff); } .vkuiTooltip--accent .vkuiTooltip__content { background-color: #5a9eff; background-color: var(--vkui--color_background_accent_tint, #5a9eff); color: #fff; color: var(--vkui--color_text_contrast, #fff); } .vkuiTooltip--accent .vkuiTooltip__arrow { color: #5a9eff; color: var(--vkui--color_background_accent_tint, #5a9eff); } .vkuiTooltip--white .vkuiTooltip__content { background-color: #fff; background-color: var(--vkui--color_background_contrast, #fff); color: #000; color: var(--vkui--color_text_primary_invariably, #000); } .vkuiTooltip--white .vkuiTooltip__arrow { color: #fff; color: var(--vkui--color_background_contrast, #fff); } .vkuiTooltip--black .vkuiTooltip__content { background-color: #2d2d2e; background-color: var(--vkui--color_background_contrast_inverse, #2d2d2e); color: #fff; color: var(--vkui--color_text_contrast, #fff); } .vkuiTooltip--black .vkuiTooltip__arrow { color: #2d2d2e; color: var(--vkui--color_background_contrast_inverse, #2d2d2e); } .vkuiTooltip--inversion .vkuiTooltip__content { background-color: #2d2d2e; background-color: var(--vkui--color_background_modal_inverse, #2d2d2e); color: #fff; color: var(--vkui--color_text_contrast_themed, #fff); } .vkuiTooltip--inversion .vkuiTooltip__arrow { color: #2d2d2e; color: var(--vkui--color_background_modal_inverse, #2d2d2e); } .vkuiPullToRefresh { flex-grow: 1; } .vkuiPullToRefresh--refreshing { pointer-events: none; touch-action: none; } .vkuiPullToRefresh__controls { pointer-events: none; width: 100%; z-index: 9; } .vkuiPullToRefresh--ios .vkuiPullToRefresh__controls { z-index: 0; } .vkuiPullToRefresh__spinner { align-items: center; background: #fff; background: var( --background_suggestions, var(--vkui--color_background_modal) ); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); box-sizing: border-box; color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); display: flex; height: 40px; justify-content: center; margin: auto; opacity: 0; transition: opacity 0.22s ease-out, -webkit-transform 0.3s cubic-bezier(0.1, 0, 0.25, 1); transition: transform 0.3s cubic-bezier(0.1, 0, 0.25, 1), opacity 0.22s ease-out; transition: transform 0.3s cubic-bezier(0.1, 0, 0.25, 1), opacity 0.22s ease-out, -webkit-transform 0.3s cubic-bezier(0.1, 0, 0.25, 1); width: 40px; } .vkuiPullToRefresh--ios .vkuiPullToRefresh__spinner { background: none; border-radius: 0; box-shadow: none; color: #99a2ad; color: var(--icon_outline_secondary, var(--vkui--color_icon_medium)); } .vkuiPullToRefresh--watching .vkuiPullToRefresh__spinner { transition: opacity 0.22s ease-out; } .vkuiPullToRefresh__spinner-self { stroke: currentColor; } .vkuiPullToRefresh--ios.vkuiPullToRefresh--refreshing .vkuiPullToRefresh__spinner-self { -webkit-animation: vkui-PullToRefreshToRefreshing 0.38s ease-out; animation: vkui-PullToRefreshToRefreshing 0.38s ease-out; } .vkuiPullToRefresh__spinner-path { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center center; transform-origin: center center; transition: stroke-dashoffset 167ms ease-out; } .vkuiPullToRefresh--refreshing .vkuiPullToRefresh__spinner-path, .vkuiPullToRefresh--watching .vkuiPullToRefresh__spinner-path { transition: none; } .vkuiPullToRefresh__spinner--on .vkuiPullToRefresh__spinner-path { -webkit-animation: vkui-rotator 0.7s linear infinite; animation: vkui-rotator 0.7s linear infinite; -webkit-animation: vkui-rotator var(--duration) linear infinite; animation: vkui-rotator var(--duration) linear infinite; } .vkuiPullToRefresh__content { overflow: hidden; transition: -webkit-transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.4s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.4s var(--ios-easing); transition: transform 0.4s var(--ios-easing); transition: transform 0.4s var(--ios-easing), -webkit-transform 0.4s var(--ios-easing); } .vkuiPullToRefresh--watching .vkuiPullToRefresh__content { transition: none; } @-webkit-keyframes vkui-PullToRefreshToRefreshing { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(0.6); transform: scale(0.6); } 90% { -webkit-transform: scale(1.1); transform: scale(1.1); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes vkui-PullToRefreshToRefreshing { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scale(0.6); transform: scale(0.6); } 90% { -webkit-transform: scale(1.1); transform: scale(1.1); } to { -webkit-transform: scale(1); transform: scale(1); } } .vkuiCounter { align-items: center; display: flex; justify-content: center; } .vkuiCounter__in { box-sizing: border-box; display: block; padding-left: 5px; padding-right: 5px; text-align: center; width: 100%; } .vkuiCounter--primary { background: #2688eb; background: var( --counter_primary_background, var(--vkui--color_background_accent) ); color: #fff; color: var(--counter_primary_text, var(--vkui--color_text_contrast)); } .vkuiCounter--secondary { background: #aeb7c2; background: var( --counter_secondary_background, var(--vkui--color_icon_tertiary) ); color: #fff; color: var(--counter_secondary_text, var(--vkui--color_text_contrast)); } .vkuiCounter--prominent { background: #ff3347; background: var( --counter_prominent_background, var(--vkui--color_background_negative) ); color: #fff; color: var(--counter_prominent_text, var(--vkui--color_text_contrast)); } .vkuiCounter--contrast { background: #fff; background: var(--vkui--color_background_contrast, #fff); color: #2688eb; color: var(--vkui--color_text_accent, #2688eb); } .vkuiCounter--s-m { border-radius: 12px; height: 24px; min-width: 24px; } .vkuiCounter--s-s { border-radius: 9px; height: 18px; min-width: 18px; } .vkuiButton--lvl-primary.vkuiButton--clr-accent .vkuiCounter { background-color: #fff; background-color: var( --button_primary_foreground, var(--vkui--color_background_contrast) ); color: #2d81e0; color: var(--button_primary_background, var(--vkui--color_text_contrast)); } .vkuiButton--lvl-secondary.vkuiButton--clr-accent .vkuiCounter { background-color: #2688eb; background-color: var( --button_secondary_foreground, var(--vkui--color_background_accent) ); color: #fff; color: var(--background_content, var(--vkui--color_text_contrast_themed)); } .vkuiButton--lvl-tertiary.vkuiButton--clr-accent .vkuiCounter { background-color: #2d81e0; background-color: var( --button_tertiary_foreground, var(--vkui--color_background_accent) ); color: #fff; color: var(--background_content, var(--vkui--color_text_contrast_themed)); } .vkuiButton--lvl-outline.vkuiButton--clr-accent .vkuiCounter { background-color: #2688eb; background-color: var( --button_outline_foreground, var(--vkui--color_background_accent) ); color: #fff; color: var(--background_content, var(--vkui--color_text_contrast_themed)); } .vkuiButton--lvl-primary.vkuiButton--clr-positive .vkuiCounter { background-color: #fff; background-color: var( --button_commerce_foreground, var(--vkui--color_background_contrast) ); color: #4bb34b; color: var(--button_commerce_background, var(--vkui--color_text_positive)); } .vkuiButton--lvl-outline.vkuiButton--clr-positive .vkuiCounter, .vkuiButton--lvl-secondary.vkuiButton--clr-positive .vkuiCounter, .vkuiButton--lvl-tertiary.vkuiButton--clr-positive .vkuiCounter { background-color: #4bb34b; background-color: var( --button_commerce_background, var(--vkui--color_background_positive) ); color: #fff; color: var(--button_commerce_foreground, var(--vkui--color_text_contrast)); } .vkuiButton--lvl-primary.vkuiButton--clr-negative .vkuiCounter { background-color: #fff; background-color: var(--white, var(--vkui--color_background_contrast)); color: #e64646; color: var(--destructive, var(--vkui--color_text_negative)); } .vkuiButton--lvl-outline.vkuiButton--clr-negative .vkuiCounter, .vkuiButton--lvl-secondary.vkuiButton--clr-negative .vkuiCounter, .vkuiButton--lvl-tertiary.vkuiButton--clr-negative .vkuiCounter { background-color: #e64646; background-color: var(--destructive, var(--vkui--color_background_negative)); color: #fff; color: var(--white, var(--vkui--color_text_contrast)); } .vkuiButton--lvl-primary.vkuiButton--clr-neutral .vkuiCounter { background-color: #fff; background-color: var( --media_overlay_button_background, var(--vkui--color_background_content) ); color: #000; color: var(--vkui--color_text_primary_invariably, #000); } .vkuiButton--lvl-outline.vkuiButton--clr-neutral .vkuiCounter, .vkuiButton--lvl-secondary.vkuiButton--clr-neutral .vkuiCounter, .vkuiButton--lvl-tertiary.vkuiButton--clr-neutral .vkuiCounter { background-color: #2688eb; background-color: var(--accent, var(--vkui--color_background_accent)); color: #fff; color: var(--white, var(--vkui--color_text_contrast)); } .vkuiButton--lvl-primary.vkuiButton--clr-overlay .vkuiCounter { background-color: #2c2d2e; background-color: var( --media_overlay_button_foreground, var(--vkui--color_icon_primary_invariably) ); color: #fff; color: var( --media_overlay_button_background, var(--vkui--color_text_contrast) ); } .vkuiButton--lvl-outline.vkuiButton--clr-overlay .vkuiCounter, .vkuiButton--lvl-secondary.vkuiButton--clr-overlay .vkuiCounter, .vkuiButton--lvl-tertiary.vkuiButton--clr-overlay .vkuiCounter { background-color: #fff; background-color: var( --media_overlay_button_background, var(--vkui--color_background_contrast) ); color: #2c2d2e; color: var( --media_overlay_button_foreground, var(--vkui--color_text_primary_invariably) ); } .vkuiWriteBarIcon .vkuiCounter { background: #4bb34b; background: var( --button_commerce_background, var(--vkui--color_background_positive) ); color: #fff; color: var(--button_commerce_foreground, var(--vkui--color_text_contrast)); } .vkuiTabsItem .vkuiCounter--secondary { background-color: #76787a; background-color: var(--panel_tab_inactive_text); color: #fff; color: var(--white); } .vkuiTabsItem--selected .vkuiCounter--secondary { background-color: #5d5f61; background-color: var(--panel_tab_active_text); color: #ebedf0; color: var(--panel_tab_active_background); } .vkuiTabsItem--ios.vkuiTabsItem--segmented .vkuiCounter--secondary { background-color: #99a2ad; background-color: var(--segmented_control_tint); color: #fff; color: var(--background_content); } .vkuiTabsItem--ios.vkuiTabsItem--segmented.vkuiTabsItem--selected .vkuiCounter--secondary { background-color: #fff; background-color: var(--background_content); color: #99a2ad; color: var(--segmented_control_tint); } .vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiCounter { background-color: #fff; background-color: var( --button_primary_foreground, var(--vkui--color_background_contrast) ); color: #2d81e0; color: var(--button_primary_background, var(--vkui--color_text_accent)); } .vkuiUsersStack { align-items: center; color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); display: flex; } .vkuiUsersStack--l-vertical { flex-direction: column; justify-content: center; } .vkuiUsersStack__photos { display: flex; } .vkuiUsersStack--l-horizontal .vkuiUsersStack__photos { margin-right: 8px; } .vkuiUsersStack--l-vertical .vkuiUsersStack__photos { margin-bottom: 8px; } .vkuiUsersStack__fill { fill: rgba(0, 28, 61, 0.08); fill: var( --placeholder_icon_background, var(--vkui--color_image_placeholder_alpha) ); } .vkuiUsersStack__photo--others { align-items: center; background: #99a2ad; background: var( --content_placeholder_icon, var(--vkui--color_icon_secondary) ); border-radius: 50%; color: #f2f3f5; color: var(--vkui--color_icon_contrast_secondary, #f2f3f5); display: flex; justify-content: center; } .vkuiUsersStack--size-xs .vkuiUsersStack__photo { height: 16px; width: 16px; } .vkuiUsersStack--size-s .vkuiUsersStack__photo { height: 24px; width: 24px; } .vkuiUsersStack--size-m .vkuiUsersStack__photo { height: 32px; width: 32px; } .vkuiUsersStack__photo + .vkuiUsersStack__photo { margin-left: -2px; } .vkuiUsersStack__text { flex: 1 1; min-width: 0; } .vkuiUsersStack--l-vertical .vkuiUsersStack__text { text-align: center; } .vkuiModalCardBase .vkuiUsersStack { margin-top: 20px; } .vkuiSeparator { color: #d7d8d9; color: var(--separator_common, var(--vkui--color_separator_primary)); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .vkuiSeparator { color: #d7d8d9; color: var(--separator_common, var(--vkui--color_separator_primary2x)); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .vkuiSeparator { color: #d7d8d9; color: var(--separator_common, var(--vkui--color_separator_primary3x)); } } .vkuiSeparator__in:not(.vkuiSeparator__in--expanded) { background: currentColor; height: 1px; height: var(--thin-border); -webkit-transform-origin: center top; transform-origin: center top; } .vkuiSeparator__in--expanded { background: transparent; height: 16px; } .vkuiSeparator--padded .vkuiSeparator__in { margin-left: 16px; margin-left: var(--vkui--size_base_padding_horizontal--regular, 16px); margin-right: 16px; margin-right: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiModalPage--sizeX-regular .vkuiSeparator--padded { padding-left: 8px; padding-right: 8px; } .vkuiSpacing { box-sizing: border-box; color: #d7d8d9; color: var(--separator_common, var(--vkui--color_separator_primary)); display: flex; flex-flow: column; justify-content: center; position: relative; } .vkuiSpacing--separator { padding-left: 16px; padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px); padding-right: 16px; padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiSpacing--separator-top { justify-content: start; } .vkuiSpacing--separator-center { justify-content: center; } .vkuiSpacing--separator-bottom { justify-content: end; } .vkuiSpacing--separator:after { background: currentColor; content: ""; display: block; height: 1px; -webkit-transform-origin: center top; transform-origin: center top; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .vkuiSpacing--separator:after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) { .vkuiSpacing--separator:after { -webkit-transform: scaleY(0.32); transform: scaleY(0.32); } } .vkuiPlaceholder { align-items: center; display: flex; justify-content: center; } .vkuiPlaceholder--stretched { bottom: 0; left: 0; padding-bottom: inherit; padding-top: inherit; position: absolute; right: 0; top: 0; z-index: 1; } .vkuiPlaceholder__in { box-sizing: border-box; max-width: 100%; padding: 48px 32px; text-align: center; } .vkuiPlaceholder__icon { color: #aeb7c2; color: var( --placeholder_icon_foreground_secondary, var(--vkui--color_icon_secondary) ); display: inline-block; margin-bottom: 12px; vertical-align: top; } .vkuiPlaceholder__header { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiPlaceholder__text { color: #818c99; color: var(--text_placeholder, var(--vkui--color_text_secondary)); } .vkuiPlaceholder__header + .vkuiPlaceholder__text { margin-top: 8px; } .vkuiPlaceholder__action:not(:first-child) { margin-top: 16px; } .vkuiBanner { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); margin: 12px 0; padding: 0 16px; padding: 0 var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiBanner__in { align-items: stretch; background-color: #f5f5f5; background-color: var( --content_tint_background, var(--vkui--color_background_secondary) ); border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); display: flex; flex-flow: row nowrap; overflow: hidden; padding: 12px 12px 12px 16px; position: relative; } .vkuiBanner__in:before { border: 1px solid rgba(0, 0, 0, 0.08); border: var(--thin-border) solid var(--image_border, var(--vkui--color_image_border_alpha)); border-radius: inherit; box-sizing: border-box; content: ""; display: block; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 2; } .vkuiBanner__before { margin-right: 12px; position: relative; z-index: 2; } .vkuiBanner__content { display: flex; flex: 1 1; flex-direction: column; justify-content: center; min-width: 0; position: relative; z-index: 2; } .vkuiBanner__header { display: block; } .vkuiBanner__subheader { color: #6d7885; color: var(--text_subhead, var(--vkui--color_text_subhead)); display: block; } .vkuiBanner__text { color: #6d7885; color: var(--vkui--color_text_subhead, #6d7885); } .vkuiBanner__bg { left: 0; position: absolute; top: 0; z-index: 1; } .vkuiBanner__bg, .vkuiBanner__bg > * { height: 100%; width: 100%; } .vkuiBanner__aside { color: #b8c1cc; color: var(--icon_tertiary, var(--vkui--color_icon_tertiary)); justify-content: flex-end; width: 28px; } .vkuiBanner__aside, .vkuiBanner__dismiss { align-content: center; align-items: center; display: flex; flex-flow: row nowrap; } .vkuiBanner__dismiss { color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); justify-content: center; position: absolute; right: 2px; top: 2px; z-index: 3; } .vkuiBanner__actions { margin-bottom: -6px; } .vkuiBanner__subheader:not(:first-child), .vkuiBanner__text:not(:first-child) { margin-top: 2px; } .vkuiBanner--md-image .vkuiBanner__in { background-color: #f5f5f5; background-color: var( --content_tint_background, var(--vkui--color_background_secondary) ); } .vkuiBanner--inverted, .vkuiBanner--inverted .vkuiBanner__subheader, .vkuiBanner--md-image .vkuiBanner__dismiss { color: #fff; color: var(--white, var(--vkui--color_text_contrast)); } .vkuiBanner--inverted .vkuiBanner__subheader { opacity: 0.72; } .vkuiBanner--sz-s .vkuiBanner__before { margin-left: -4px; } .vkuiBanner--sz-m .vkuiBanner__in { padding: 16px; } .vkuiBanner--sz-m .vkuiBanner__subheader:not(:first-child), .vkuiBanner--sz-m .vkuiBanner__text:not(:first-child) { margin-top: 4px; } .vkuiBanner--ios .vkuiBanner__dismiss, .vkuiBanner--ios.vkuiBanner--md-image .vkuiBanner__dismiss { color: #b8c1cc; color: var(--icon_tertiary, var(--vkui--color_icon_tertiary)); } .vkuiMiniInfoCell { display: flex; padding: 6px 16px; padding: 6px var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiMiniInfoCell--lvl-primary { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiMiniInfoCell--lvl-secondary { color: #6d7885; color: var(--text_subhead, var(--vkui--color_text_subhead)); } .vkuiMiniInfoCell__icon { color: #99a2ad; color: var(--icon_outline_secondary, var(--vkui--color_icon_secondary)); margin-right: 12px; } .vkuiMiniInfoCell__content { flex: 1 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiMiniInfoCell--wr-short .vkuiMiniInfoCell__content { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; max-height: 60px; white-space: normal; } .vkuiMiniInfoCell--wr-full .vkuiMiniInfoCell__content { overflow: inherit; white-space: normal; } .vkuiMiniInfoCell__after { margin-bottom: -2px; margin-left: 12px; margin-top: -2px; } .vkuiMiniInfoCell--md-add { color: #2688eb; color: var(--accent, var(--vkui--color_text_link)); } .vkuiMiniInfoCell--md-add .vkuiMiniInfoCell__icon { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiMiniInfoCell--md-more { color: #2d81e0; color: var(--link_alternate, var(--vkui--color_text_link)); } .vkuiMiniInfoCell--md-more .vkuiMiniInfoCell__icon { color: #2d81e0; color: var(--link_alternate, var(--vkui--color_icon_accent)); } .vkuiMiniInfoCell--md-more { padding-bottom: 10px; padding-top: 10px; } .vkuiWriteBar { background: #fff; background: var(--background_content, var(--vkui--color_background_modal)); } .vkuiWriteBar--shadow { box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); } .vkuiWriteBar__after, .vkuiWriteBar__before, .vkuiWriteBar__form { align-items: flex-end; display: flex; } .vkuiWriteBar__form { min-height: 52px; } .vkuiWriteBar__formIn { display: flex; flex: 1 1; min-width: 0; position: relative; } .vkuiWriteBar__textarea { -webkit-appearance: none; background: transparent; border: none; box-sizing: border-box; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); flex: 1 1; margin: 0; max-height: 120px; min-width: 0; resize: none; width: 100%; } .vkuiWriteBar__textarea::-webkit-input-placeholder { color: #818c99; color: var(--text_placeholder, var(--vkui--color_text_subhead)); opacity: 1; } .vkuiWriteBar__textarea::-moz-placeholder { color: #818c99; color: var(--text_placeholder, var(--vkui--color_text_subhead)); opacity: 1; } .vkuiWriteBar__textarea::-ms-input-placeholder { color: #818c99; color: var(--text_placeholder, var(--vkui--color_text_subhead)); opacity: 1; } .vkuiWriteBar__textarea::placeholder { color: #818c99; color: var(--text_placeholder, var(--vkui--color_text_subhead)); opacity: 1; } .vkuiWriteBar__inlineAfter { align-items: flex-end; display: flex; } .vkuiWriteBar__before { padding-left: 4px; } .vkuiWriteBar__after { padding-right: 4px; } .vkuiWriteBar__textarea { height: 52px; padding: 16px 12px; } .vkuiWriteBar--ios .vkuiWriteBar__after, .vkuiWriteBar--ios .vkuiWriteBar__before { padding: 0 4px; } .vkuiWriteBar--ios .vkuiWriteBar__formIn { background-color: #f2f3f5; background-color: var( --input_background, var(--vkui--color_write_bar_input_background) ); border: 1px solid #e1e3e6; border: var(--thin-border) solid var(--input_border, var(--vkui--color_write_bar_input_border_alpha)); border-radius: 18px; box-sizing: border-box; margin: 8px 0; } .vkuiWriteBar--ios .vkuiWriteBar__formIn:first-child { margin-left: 12px; } .vkuiWriteBar--ios .vkuiWriteBar__inlineAfter { margin-bottom: -9px; margin-right: -1px; margin-top: -9px; } .vkuiWriteBar--ios .vkuiWriteBar__textarea { font-size: 17px; height: 34px; line-height: 22px; padding: 6px 11px; } .vkuiWriteBarIcon { background: none; border: 0; border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); cursor: pointer; height: 52px; position: relative; width: 44px; } .vkuiWriteBarIcon__in { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } .vkuiWriteBarIcon:disabled { opacity: 0.4; pointer-events: none; } .vkuiWriteBarIcon__active { opacity: 0.6; } .vkuiWriteBarIcon__counter { box-shadow: 0 0 0 2px #fff; box-shadow: 0 0 0 2px var(--background_content, var(--vkui--color_background_modal)); position: absolute; right: 2px; top: 6px; } .vkuiWriteBarIcon.vkuiWriteBarIcon--done, .vkuiWriteBarIcon.vkuiWriteBarIcon--send { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiWriteBarIcon--ios { color: #2688eb; color: var(--writebar_icon, var(--vkui--color_icon_accent)); } .vkuiWriteBarIcon--ios.vkuiWriteBarIcon--done, .vkuiWriteBarIcon--ios.vkuiWriteBarIcon--send { padding-left: 0; padding-right: 0; width: 48px; } .vkuiWriteBarIcon--ios.vkuiWriteBarIcon--done:first-child, .vkuiWriteBarIcon--ios.vkuiWriteBarIcon--send:first-child { margin-left: -4px; } .vkuiWriteBarIcon--ios.vkuiWriteBarIcon--done:last-child, .vkuiWriteBarIcon--ios.vkuiWriteBarIcon--send:last-child { margin-right: -4px; } .vkuiSubnavigationBar__in { margin: -8px 0; } .vkuiSubnavigationBar__scrollIn { display: flex; padding-bottom: 20px; padding-bottom: calc( var(--vkui--size_subnavigation_bar_padding_vertical--regular, 12px) + 8px ); padding-top: 20px; padding-top: calc( var(--vkui--size_subnavigation_bar_padding_vertical--regular, 12px) + 8px ); } .vkuiSubnavigationBar__scrollIn:after, .vkuiSubnavigationBar__scrollIn:before { content: ""; min-width: 16px; min-width: var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiSubnavigationButton { border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vkuiSubnavigationButton__in { align-items: center; display: flex; justify-content: center; } .vkuiSubnavigationButton--s .vkuiSubnavigationButton__in { height: 30px; height: var(--vkui--size_button_small_height--regular, 30px); } .vkuiSubnavigationButton--m .vkuiSubnavigationButton__in { height: 36px; height: var(--vkui--size_button_medium_height--regular, 36px); } .vkuiSubnavigationButton--l .vkuiSubnavigationButton__in { height: 44px; height: var(--vkui--size_button_large_height--regular, 44px); } .vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--s .vkuiSubnavigationButton__in { height: 28px; height: var(--vkui--size_button_small_height--compact, 28px); } .vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--m .vkuiSubnavigationButton__in { height: 32px; height: var(--vkui--size_button_medium_height--compact, 32px); } .vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--l .vkuiSubnavigationButton__in { height: 36px; height: var(--vkui--size_button_large_height--compact, 36px); } .vkuiSubnavigationButton__before { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); margin-right: 8px; } .vkuiSubnavigationButton__label { flex-grow: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiSubnavigationButton__after { margin-left: 8px; } .vkuiSubnavigationButton__expandableIcon { color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); margin-left: 8px; margin-top: 1px; } .vkuiSubnavigationButton__before:first-child, .vkuiSubnavigationButton__label:first-child { padding-left: 12px; padding-left: var( --vkui--size_button_base_small_padding_horizontal_icon--regular, 12px ); } .vkuiSubnavigationButton__after:last-child, .vkuiSubnavigationButton__expandableIcon, .vkuiSubnavigationButton__label:last-child { padding-right: 12px; padding-right: var( --vkui--size_button_base_small_padding_horizontal_icon--regular, 12px ); } .vkuiSubnavigationButton--mode-primary { background-color: #fff; background-color: var( --modal_card_background, var(--vkui--color_background_modal) ); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); } .vkuiSubnavigationButton--mode-outline { box-shadow: inset 0 0 0 1px var(--vkui--color_field_border_alpha, rgba(0, 0, 0, 0.12)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 0 var(--thin-border) rgba(0, 0, 0, 0.12); box-shadow: inset 0 0 0 var(--thin-border) var(--vkui--color_field_border_alpha, rgba(0, 0, 0, 0.12)); } .vkuiSubnavigationButton--selected { background-color: #2d81e0; background-color: var( --button_primary_background, var(--vkui--color_background_accent) ); border: none; box-shadow: none; color: #fff; color: var(--button_primary_foreground, var(--vkui--color_text_contrast)); } .vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary { background-color: rgba(0, 16, 61, 0.08); background-color: var( --vkui--color_transparent--active, rgba(0, 16, 61, 0.08) ); color: #000; color: var(--vkui--color_text_primary, #000); } .vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before, .vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon { color: inherit; } .vkuiSubnavigationBar .vkuiSubnavigationButton + .vkuiSubnavigationButton { margin-left: 8px; margin-left: var(--vkui--size_subnavigation_bar_gap--regular, 8px); } .vkuiSubnavigationBar--fixed .vkuiSubnavigationButton { flex: 1 1; min-width: 0; } .vkuiPagination__list { display: flex; list-style-type: none; margin: 0; padding: 0; } .vkuiPagination__prevButtonContainer { margin-right: 8px; } .vkuiPagination__nextButtonContainer { margin-left: 8px; } .vkuiPagination__page { border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-sizing: border-box; color: #818c99; color: var(--vkui--color_text_secondary, #818c99); min-width: 40px; padding-left: 8px; padding-right: 8px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .vkuiPagination__page--state-hover { background-color: rgba(0, 16, 61, 0.04); background-color: var( --vkui--color_transparent--hover, rgba(0, 16, 61, 0.04) ); } .vkuiPagination__page--current, .vkuiPagination__page--state-active { background-color: rgba(0, 16, 61, 0.08); background-color: var( --vkui--color_transparent--active, rgba(0, 16, 61, 0.08) ); color: #000; color: var(--vkui--color_text_primary, #000); } .vkuiPagination__page--disabled { opacity: 0.4; opacity: var(--vkui--opacity_disable, 0.4); } .vkuiPagination__page--sizeY-compact { font-size: 15px; font-size: var(--vkui--font_text--font_size--compact, 15px); height: 36px; height: var(--vkui--size_button_large_height--compact, 36px); line-height: 36px; line-height: var(--vkui--size_button_large_height--compact, 36px); } .vkuiPagination__page--sizeY-regular { font-size: 16px; font-size: var(--vkui--font_text--font_size--regular, 16px); height: 44px; height: var(--vkui--size_button_large_height--regular, 44px); line-height: 44px; line-height: var(--vkui--size_button_large_height--regular, 44px); } .vkuiPagination__page--type-ellipsis { min-width: 16px; padding-left: 0; padding-right: 0; } .vkuiFormLayout { position: relative; } .vkuiFormLayout__submit { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; height: 0; left: 0; padding: 0; pointer-events: none; position: absolute; top: 0; visibility: hidden; width: 0; } .vkuiFormItem { display: block; padding: 12px 16px; padding: var(--vkui--size_form_item_padding_vertical--regular, 12px) var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiFormItem--removable { padding-left: 0; padding-right: 0; } .vkuiFormItem__removable { flex-basis: 0; flex-grow: 1; flex-shrink: 0; max-width: 100%; min-width: 1px; overflow: hidden; padding: 0; } .vkuiFormItem__top { color: #6d7885; color: var(--text_subhead, var(--vkui--color_text_subhead)); overflow: hidden; padding-bottom: 8px; padding-top: 2px; text-overflow: ellipsis; white-space: nowrap; } .vkuiFormItem__bottom { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); padding-top: 8px; } .vkuiFormItem--error .vkuiFormItem__bottom { color: #e64646; color: var(--field_error_border, var(--vkui--color_text_negative)); } .vkuiFormItem--valid .vkuiFormItem__bottom, .vkuiFormItem--verified .vkuiFormItem__bottom { color: #4bb34b; color: var(--field_valid_border, var(--vkui--color_text_positive)); } .vkuiFormItem--sizeY-compact .vkuiFormItem__top { padding-bottom: 6px; } .vkuiFormItem--sizeY-compact .vkuiFormItem__bottom { padding-top: 6px; } .vkuiFormItem--ios { --formitem_padding: 12px; } .vkuiFormLayoutGroup--horizontal .vkuiFormItem { flex-basis: 0; flex-grow: 1; flex-shrink: 0; max-width: 100%; min-width: 1px; padding: 0; } .vkuiFormLayoutGroup--horizontal:not(.vkuiFormLayoutGroup--segmented) .vkuiFormItem + .vkuiFormItem { margin-left: 24px; } .vkuiFormItem--withTop .vkuiFormItem__removable, .vkuiFormLayoutGroup--horizontal .vkuiFormItem--withTop { margin-top: -28px; margin-top: calc( -10px - var(--vkui--font_subhead--line_height--regular, 18px) ); } .vkuiFormItem--withTop.vkuiFormItem--sizeY-compact .vkuiFormItem__removable, .vkuiFormLayoutGroup--horizontal .vkuiFormItem--withTop.vkuiFormItem--sizeY-compact { margin-top: -24px; margin-top: calc( -8px - var(--vkui--font_subhead--line_height--compact, 16px) ); } .vkuiFormLayoutGroup--horizontal { align-items: flex-start; display: flex; flex-wrap: wrap; padding: 12px 16px; padding: var(--vkui--size_form_item_padding_vertical--regular, 12px) var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiFormLayoutGroup__removable { flex-grow: 1; max-width: 100%; min-width: 0; } .vkuiFormLayoutGroup__offset { display: none; } .vkuiFormLayoutGroup--horizontal .vkuiFormItem--withTop ~ .vkuiFormLayoutGroup__offset { display: block; height: 28px; height: calc(10px + var(--vkui--font_subhead--line_height--regular, 18px)); min-width: 100%; order: -1; } .vkuiFormLayoutGroup--sizeY-compact.vkuiFormLayoutGroup--horizontal .vkuiFormItem--withTop ~ .vkuiFormLayoutGroup__offset { height: 24px; height: calc(8px + var(--vkui--font_subhead--line_height--compact, 16px)); } .vkuiFormLayoutGroup--ios { --formitem_padding: 12px; } .vkuiFormLayoutGroup--removable { padding-left: 0; padding-right: 0; } .vkuiFormLayoutGroup--segmented { position: relative; z-index: 1; } .vkuiFormLayoutGroup--segmented > * { flex: 1 1; min-width: 0; } .vkuiFormLayoutGroup--segmented > :not(:first-child):not(.vkuiFormLayoutGroup__offset) { margin-left: -1px; margin-left: calc(var(--thin-border) * -1); } .vkuiFormStatus { background: #f2f3f5; background: var(--field_background, var(--vkui--color_field_background)); border-radius: 10px; color: #6d7885; color: var(--text_subhead, var(--vkui--color_text_subhead)); padding: 12px; } .vkuiFormStatus b:first-child, .vkuiFormStatus__header { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); } .vkuiFormStatus b:first-child, .vkuiFormStatus__header:not(:last-child) { margin-bottom: 2px; } .vkuiFormStatus--error { background: #faebeb; background: var( --field_error_background, var(--vkui--color_background_negative_tint) ); color: #e64646; color: var(--field_error_border, var(--vkui--color_text_negative)); } .vkuiFormStatus--error .vkuiFormStatus b:first-child, .vkuiFormStatus--error .vkuiFormStatus__header { color: currentColor; } .vkuiFormStatus b:first-child { display: block; font-size: 16px; font-weight: 500; line-height: 20px; } .vkuiSlider { height: 28px; padding: 0 14px; position: relative; z-index: 0; } .vkuiSlider:before { background-color: rgba(0, 28, 61, 0.08); background-color: var( --placeholder_icon_background, var(--vkui--color_track_background) ); border-radius: 1px; content: ""; height: 2px; left: 0; position: absolute; top: 13px; width: 100%; z-index: -1; } .vkuiSlider__in { height: 100%; position: relative; } .vkuiSlider__dragger { height: 0; left: 0; position: absolute; top: 13px; width: 0; } .vkuiSlider__dragger:before { background: #2688eb; background: var(--accent, var(--vkui--color_background_accent)); border-radius: 1px; content: ""; height: 2px; left: -14px; position: absolute; top: 0; width: calc(100% + 28px); } .vkuiSlider__thumb { background: #fff; background: var(--vkui--color_background_contrast, #fff); border: 0.5px solid rgba(0, 0, 0, 0.12); border: 0.5px solid var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.12)); border-radius: 14px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); height: 28px; position: absolute; top: -13px; transition: -webkit-transform 0.1s ease; transition: transform 0.1s ease; transition: transform 0.1s ease, -webkit-transform 0.1s ease; width: 28px; } .vkuiSlider__thumb--start { left: -14px; } .vkuiSlider__thumb--end { right: -14px; } .vkuiSlider--disabled { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiSlider--sizeY-compact { height: 24px; padding: 0 12px; } .vkuiSlider--sizeY-compact .vkuiSlider__dragger, .vkuiSlider--sizeY-compact:before { top: 11px; } .vkuiSlider--sizeY-compact .vkuiSlider__dragger:before { left: -12px; width: calc(100% + 24px); } .vkuiSlider--sizeY-compact .vkuiSlider__thumb { height: 24px; top: -11px; width: 24px; } .vkuiSlider--sizeY-compact .vkuiSlider__thumb--start { left: -12px; } .vkuiSlider--sizeY-compact .vkuiSlider__thumb--end { right: -12px; } .vkuiFormField { align-items: center; box-sizing: border-box; display: flex; min-height: 44px; min-height: var(--vkui--size_field_height--regular, 44px); position: relative; z-index: 1; } .vkuiFormField > * { border-radius: inherit; z-index: 6; } .vkuiFormField--sizeY-compact { min-height: 36px; min-height: var(--vkui--size_field_height--compact, 36px); } .vkuiFormField__after, .vkuiFormField__before { align-content: center; align-items: center; color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); display: flex; flex-shrink: 0; height: 100%; justify-content: center; min-width: 44px; min-width: var(--vkui--size_field_height--regular, 44px); position: relative; z-index: 7; } .vkuiFormField--sizeY-compact .vkuiFormField__after, .vkuiFormField--sizeY-compact .vkuiFormField__before { height: 36px; height: var(--vkui--size_field_height--compact, 36px); min-width: 36px; min-width: var(--vkui--size_field_height--compact, 36px); } .vkuiFormField__before { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiFormField__after { color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); } .vkuiFormField__border { border: 1px solid transparent; border: var(--thin-border) solid transparent; border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-sizing: border-box; height: 100%; left: 0; position: absolute; top: 0; -webkit-transform-origin: left top; transform-origin: left top; width: 100%; z-index: 1; } .vkuiFormField--default .vkuiFormField__border { background-color: #f2f3f5; background-color: var( --field_background, var(--vkui--color_field_background) ); border-color: rgba(0, 0, 0, 0.12); border-color: var(--field_border, var(--vkui--color_field_border_alpha)); } .vkuiFormField--status-error .vkuiFormField__border, .vkuiFormItem--error .vkuiFormField__border { background-color: #faebeb; background-color: var( --field_error_background, var(--vkui--color_background_negative_tint) ); border-color: #e64646; border-color: var(--field_error_border, var(--vkui--color_stroke_negative)); z-index: 3; } .vkuiFormField--status-valid .vkuiFormField__border, .vkuiFormItem--valid .vkuiFormField__border { border-color: #4bb34b; border-color: var(--field_valid_border, var(--vkui--color_stroke_positive)); z-index: 3; } .vkuiFormField--disabled { cursor: default; opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); pointer-events: none; } .vkuiFormField--hover .vkuiFormField__border { background-color: #f2f3f5; background-color: var( --field_background, var(--vkui--color_field_background) ); } .vkuiFormField--default.vkuiFormField--hover .vkuiFormField__border { border-color: rgba(0, 0, 0, 0.24); border-color: var( --icon_tertiary_alpha, var(--vkui--color_field_border_alpha--hover) ); z-index: 4; } .vkuiFormField :focus ~ .vkuiFormField__border, .vkuiFormField:focus-within .vkuiFormField__border { border-color: #2688eb; border-color: var(--accent, var(--vkui--color_stroke_accent)); z-index: 5; } .vkuiModalCardBase__header + .vkuiFormField, .vkuiModalCardBase__subheader + .vkuiFormField { margin-top: 16px; } .vkuiSelect--pop-down .vkuiFormField__border { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .vkuiSelect--pop-up .vkuiFormField__border { border-top-left-radius: 0; border-top-right-radius: 0; } .vkuiSelect .vkuiFormField__after { pointer-events: none; } .vkuiCalendarHeader__picker .vkuiFormField__after { min-width: 12px; padding-right: 8px; } .vkuiChipsInput .vkuiFormField__after { z-index: 7; } .vkuiFormLayoutGroup--segmented .vkuiFormField { z-index: auto; } .vkuiFormLayoutGroup--segmented .vkuiRemovable__content > .vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField__border, .vkuiFormLayoutGroup--segmented > .vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField__border { border-radius: 0; } .vkuiFormLayoutGroup--segmented .vkuiRemovable__content > :first-of-type:not(:last-of-type) .vkuiFormField__border, .vkuiFormLayoutGroup--segmented > :first-of-type:not(:last-of-type) .vkuiFormField__border { border-bottom-right-radius: 0; border-top-right-radius: 0; } .vkuiFormLayoutGroup--segmented .vkuiRemovable__content > .vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField__border, .vkuiFormLayoutGroup--segmented > .vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField__border { border-bottom-left-radius: 0; border-top-left-radius: 0; } .vkuiRadio { display: block; padding: 0 16px; padding: 0 var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiFormItem .vkuiRadio { box-sizing: initial; margin: 0 -16px; margin: 0 calc(var(--vkui--size_base_padding_horizontal--regular, 16px) * -1); width: 100%; } .vkuiRadio__container { align-items: center; display: flex; justify-content: flex-start; } .vkuiRadio__input:disabled ~ .vkuiRadio__container { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiRadio__icon { color: #b8c1cc; color: var(--icon_tertiary, var(--vkui--color_icon_tertiary)); flex-shrink: 0; height: 22px; margin-right: 14px; transition: color 0.15s cubic-bezier(0.36, 0.66, 0.04, 1); transition: color 0.15s var(--ios-easing); width: 22px; } .vkuiRadio__input:checked ~ .vkuiRadio__container .vkuiRadio__icon { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiRadio__icon .vkuiRadio__pin { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 12px 12px; transform-origin: 12px 12px; transition: -webkit-transform 0.15s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.15s cubic-bezier(0.36, 0.66, 0.04, 1); transition: transform 0.15s cubic-bezier(0.36, 0.66, 0.04, 1), -webkit-transform 0.15s cubic-bezier(0.36, 0.66, 0.04, 1); transition: -webkit-transform 0.15s var(--ios-easing); transition: transform 0.15s var(--ios-easing); transition: transform 0.15s var(--ios-easing), -webkit-transform 0.15s var(--ios-easing); } .vkuiRadio__input:checked ~ .vkuiRadio__container .vkuiRadio__icon .vkuiRadio__pin { -webkit-transform: none; transform: none; } .vkuiRadio__content { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: block; flex-grow: 1; max-width: 100%; } .vkuiRadio__description { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); display: block; margin-bottom: 12px; margin-top: 2px; } .vkuiRadio__children { margin-top: 12px; } .vkuiRadio__children:last-child { margin-bottom: 12px; } .vkuiRadio--sizeY-compact .vkuiRadio__children { margin-top: 8px; } .vkuiRadio--sizeY-compact .vkuiRadio__children:last-child { margin-bottom: 8px; } .vkuiRadio--sizeY-compact .vkuiRadio__description { margin-bottom: 7px; } .vkuiRadio--sizeY-compact .vkuiRadio__icon { height: 18px; width: 18px; } .vkuiRadio--sizeY-compact .vkuiRadio__icon:after { height: 12px; width: 12px; } .vkuiRadioGroup .vkuiRadio { box-sizing: border-box; flex: 1 1; margin: 0; } .vkuiRadioGroup--horizontal { display: flex; } .vkuiFormItem .vkuiRadioGroup { box-sizing: initial; margin: 0 -16px; margin: 0 calc(var(--vkui--size_base_padding_horizontal--regular, 16px) * -1); } .vkuiCheckbox { align-items: center; display: flex; justify-content: flex-start; min-height: 44px; min-height: var(--vkui--size_field_height--regular, 44px); min-width: 44px; min-width: var(--vkui--size_field_height--regular, 44px); padding: 0 16px; padding: 0 var(--vkui--size_base_padding_horizontal--regular, 16px); } .vkuiFormItem .vkuiCheckbox { box-sizing: initial; margin: 0 -16px; margin: 0 calc(var(--vkui--size_base_padding_horizontal--regular, 16px) * -1); width: 100%; } .vkuiCheckbox__icon { flex-shrink: 0; margin-right: 12px; } .vkuiCheckbox__icon--indeterminate, .vkuiCheckbox__icon--on { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); display: none; } .vkuiCheckbox__icon--off { color: #b8c1cc; color: var(--icon_tertiary, var(--vkui--color_icon_tertiary)); } .vkuiCheckbox__content { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); flex-grow: 1; word-break: break-word; } .vkuiCheckbox__description { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); display: block; margin-bottom: 12px; margin-top: 2px; } .vkuiCheckbox__children { margin-top: 12px; } .vkuiCheckbox__children:last-child { margin-bottom: 12px; } .vkuiCheckbox__input:checked ~ .vkuiCheckbox__icon--on { display: flex; } .vkuiCheckbox__input:checked ~ .vkuiCheckbox__icon--off, .vkuiCheckbox__input:indeterminate ~ .vkuiCheckbox__icon--indeterminate { display: none; } .vkuiCheckbox__input:indeterminate ~ .vkuiCheckbox__icon--indeterminate { display: flex; } .vkuiCheckbox__input:indeterminate ~ .vkuiCheckbox__icon--off, .vkuiCheckbox__input:indeterminate ~ .vkuiCheckbox__icon--on { display: none; } .vkuiCheckbox__input[disabled] ~ * { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiCheckbox--sizeY-compact { min-height: 36px; min-height: var(--vkui--size_field_height--compact, 36px); min-width: 36px; min-width: var(--vkui--size_field_height--compact, 36px); } .vkuiCheckbox--sizeY-compact .vkuiCheckbox__children { margin-top: 8px; } .vkuiCheckbox--sizeY-compact .vkuiCheckbox__children:last-child, .vkuiCheckbox--sizeY-compact .vkuiCheckbox__description { margin-bottom: 8px; } .vkuiCheckbox--simple { align-items: center; border-radius: 50%; display: flex; justify-content: center; padding: 0; } .vkuiCheckbox--simple .vkuiCheckbox__content { display: none; } .vkuiCheckbox--simple .vkuiCheckbox__icon { margin: 0; } .vkuiInput { font-size: 16px; line-height: 20px; position: relative; } .vkuiInput--center .vkuiInput__el { text-align: center; } .vkuiInput--right .vkuiInput__el { text-align: right; } .vkuiInput__el { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; box-shadow: none; box-sizing: border-box; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: block; font-size: 16px; font-size: var(--vkui--font_text--font_size--regular, 16px); font-weight: 400; font-weight: var(--vkui--font_text--font_weight--regular, 400); line-height: 20px; line-height: var(--vkui--font_text--line_height--regular, 20px); margin: 0; padding-left: 12px; padding-right: 12px; position: relative; text-overflow: ellipsis; width: 100%; z-index: 6; } .vkuiInput--sizeY-compact .vkuiInput__el { font-size: 15px; font-size: var(--vkui--font_text--font_size--compact, 15px); line-height: 20px; line-height: var(--vkui--font_text--line_height--compact, 20px); } .vkuiInput--hasBefore .vkuiInput__el { padding-left: 0; } .vkuiInput--hasAfter .vkuiInput__el { padding-right: 0; } .vkuiInput__el:disabled { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiInput__el::-webkit-input-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiInput__el::-moz-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiInput__el::-ms-input-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiInput__el::placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiInput__el:disabled::-webkit-input-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiInput__el:disabled::-moz-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiInput__el:disabled::-ms-input-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiInput__el:disabled::placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiChipsInput { max-width: 100%; } .vkuiChipsInputBase { display: flex; flex-grow: 1; flex-shrink: 1; flex-wrap: wrap; max-width: 100%; overflow: hidden; padding: 3px; position: relative; z-index: 6; } .vkuiChipsInputBase__chip { margin: 2px; max-width: calc(100% - 4px); } .vkuiChipsInputBase__label { display: flex; flex: 1 1; flex-direction: column; margin: 2px 2px 2px 10px; } .vkuiChipsInputBase__el { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; box-shadow: none; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); font-size: 15px; line-height: 26px; margin-bottom: 2px; padding: 0; position: relative; width: 100%; z-index: 2; } .vkuiChipsInputBase__el:focus { min-width: 64px; } .vkuiChipsInputBase__el::-ms-clear { display: none; } .vkuiChipsInputBase__el:disabled { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiChipsInputBase__el::-webkit-input-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiChipsInputBase__el::-moz-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiChipsInputBase__el::-ms-input-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiChipsInputBase__el::placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiChipsInputBase__el:disabled::-webkit-input-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiChipsInputBase__el:disabled::-moz-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiChipsInputBase__el:disabled::-ms-input-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiChipsInputBase__el:disabled::placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiChipsInputBase__el[readonly] { cursor: default; } .vkuiChipsInputBase--sizeY-compact { padding: 1px; } .vkuiChip { background: #fff; background: var(--background_content, var(--vkui--color_background_content)); border: 1px solid rgba(0, 0, 0, 0.08); border: var(--thin-border) solid var(--image_border, var(--vkui--color_image_border_alpha)); border-radius: 6px; box-sizing: border-box; display: inline-block; height: 32px; } .vkuiChip__in { align-items: center; display: flex; height: 100%; padding: 0 8px; position: relative; } .vkuiChip--removable .vkuiChip__in { padding-right: 0; } .vkuiChip__content { color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiChip__remove { align-content: center; align-items: center; background: transparent; border: none; border-radius: 2px; box-sizing: border-box; color: #99a2ad; color: var(--icon_secondary, var(--vkui--color_icon_secondary)); cursor: pointer; display: flex; flex-grow: 0; flex-shrink: 0; height: 28px; justify-content: center; margin: -1px; padding: 6px; position: relative; -webkit-transform: translateX(-1px); transform: translateX(-1px); width: 28px; } .vkuiChip__before { margin-right: 6px; } .vkuiChip__after { margin-left: 6px; } .vkuiChip--sizeY-compact { height: 28px; } .vkuiSelect { box-sizing: border-box; cursor: pointer; position: relative; } .vkuiSelect__el { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; display: block; font-size: 16px; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 7; } .vkuiSelect__container { box-sizing: border-box; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); flex-grow: 1; flex-shrink: 1; overflow: hidden; padding-left: 12px; padding-right: 12px; position: relative; z-index: 6; } .vkuiSelect--hasBefore .vkuiSelect__container { padding-left: 0; } .vkuiSelect--hasAfter .vkuiSelect__container { padding-right: 0; } .vkuiSelect--multiline .vkuiSelect__container { padding-bottom: 12px; padding-top: 12px; } .vkuiSelect--sizeY-compact.vkuiSelect--multiline .vkuiSelect__container { padding-bottom: 8px; padding-top: 8px; } .vkuiSelect__title { display: block; } .vkuiSelect:not(.vkuiSelect--multiline) .vkuiSelect__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vkuiSelect--empty .vkuiSelect__title { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); } .vkuiSelect--align-right .vkuiSelect__title { text-align: right; } .vkuiSelect--align-center .vkuiSelect__title { text-align: center; } .vkuiCalendarHeader__picker .vkuiSelect__container { padding-right: 4px; } .vkuiTextarea { position: relative; } .vkuiTextarea__el { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; box-sizing: border-box; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); display: block; font-size: 16px; font-size: var(--vkui--font_text--font_size--regular, 16px); font-weight: 400; font-weight: var(--vkui--font_text--font_weight--regular, 400); line-height: 20px; line-height: var(--vkui--font_text--line_height--regular, 20px); margin: 0; max-height: 204px; padding: 12px; position: relative; resize: none; width: 100%; z-index: 6; } .vkuiTextarea__el[cols] { width: auto; } .vkuiTextarea--sizeY-compact .vkuiTextarea__el { font-size: 15px; font-size: var(--vkui--font_text--font_size--compact, 15px); line-height: 20px; line-height: var(--vkui--font_text--line_height--compact, 20px); max-height: 196px; } .vkuiTextarea__el::-webkit-input-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiTextarea__el::-moz-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiTextarea__el::-ms-input-placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiTextarea__el::placeholder { color: #818c99; color: var(--field_text_placeholder, var(--vkui--color_text_secondary)); opacity: 1; } .vkuiTextarea__el:disabled { opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiTextarea__el:disabled::-webkit-input-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiTextarea__el:disabled::-moz-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiTextarea__el:disabled::-ms-input-placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiTextarea__el:disabled::placeholder { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); } .vkuiCustomScrollView { height: 100%; overflow: hidden; position: relative; width: 100%; } .vkuiCustomScrollView__box { height: 100%; max-height: inherit; overflow-x: hidden; overflow-y: scroll; padding-right: 100px; position: relative; scrollbar-width: none; width: 100%; z-index: 0; } .vkuiCustomScrollView__box::-webkit-scrollbar { display: none; } .vkuiCustomScrollView__barY:active + .vkuiCustomScrollView__box { pointer-events: none; } .vkuiCustomScrollView__barY { height: 100%; position: absolute; right: 0; top: 0; width: 10px; z-index: 1; } .vkuiCustomScrollView__trackerY { box-sizing: border-box; left: 0; padding: 4px 4px 4px 0; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 10px; } .vkuiCustomScrollView__trackerY--hidden { opacity: 0; transition: opacity 0.2s; } .vkuiCustomScrollView__trackerY:before { background-color: #818c99; background-color: var(--icon_medium, var(--vkui--color_icon_medium)); border-radius: 12px; content: ""; display: block; height: 100%; opacity: 0.48; transition: opacity 0.2s, -webkit-transform 0.2s; transition: transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s; width: 100%; } .vkuiCustomScrollView__trackerY:active:before, .vkuiCustomScrollView__trackerY:hover:before { opacity: 0.8; -webkit-transform: scaleX(1.3333); transform: scaleX(1.3333); } .vkuiCustomSelectDropdown .vkuiCustomScrollView__box { padding-right: 8px; } .vkuiCustomSelectDropdown--wide .vkuiCustomScrollView__box { padding-right: 0; } .vkuiCustomSelect { cursor: pointer; display: block; position: relative; width: 100%; } .vkuiCustomSelect__control { display: none; } .vkuiCustomSelect__empty { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); padding: 12px 0; text-align: center; } .vkuiCustomSelect__fetching { align-items: center; display: flex; justify-content: center; } .vkuiCustomSelectOption { align-items: center; box-sizing: border-box; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); cursor: pointer; display: flex; padding: 8px 12px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: 100%; } .vkuiCustomSelectOption--hierarchy { --custom-select-option-hierarchy-level: 0; padding-left: calc( var(--custom-select-option-hierarchy-level) * var(--vkui--size_option_hierarchy--regular, 32px) ); } .vkuiCustomSelectOption--sizeY-regular { min-height: 44px; } .vkuiCustomSelectOption--disabled { cursor: default; opacity: 0.64; opacity: var(--vkui--opacity_disable_accessibility, 0.64); } .vkuiCustomSelectOption--hover { background-color: #f2f3f5; background-color: var( --button_muted_background, var(--vkui--color_transparent--hover) ); } .vkuiCustomSelectOption__before { flex-shrink: 0; margin-right: 7px; } .vkuiCustomSelectOption__main { flex-grow: 1; max-width: 100%; min-width: 0; } .vkuiCustomSelectOption__children { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .vkuiCustomSelectOption__after { align-items: center; display: flex; flex-shrink: 0; margin-left: 8px; } .vkuiCustomSelectOption__description { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); overflow: hidden; text-overflow: ellipsis; } .vkuiCustomSelectOption__selectedIcon { color: #2688eb; color: var(--accent, var(--vkui--color_icon_accent)); } .vkuiCustomSelectOption__selectedIcon:not(:first-child) { margin-left: 8px; } .vkuiDatePicker { border: 0; margin: 0; padding: 0; } .vkuiDatePicker__container { display: flex; flex-direction: row; width: 100%; } .vkuiDatePicker__day { min-width: 72px; } .vkuiDatePicker__month { display: flex; flex: 1 0; min-width: 0; padding: 0 8px; } .vkuiDatePicker__year { min-width: 92px; } .vkuiDatePicker__monthSelect { width: 100%; } .vkuiSliderSwitch { background-color: #f2f3f5; background-color: var(--field_background); border-radius: 8px; box-sizing: border-box; display: flex; height: 44px; position: relative; transition: all 0.1s ease-out; width: 100%; } .vkuiSliderSwitch__button { -webkit-tap-highlight-color: transparent; align-items: center; -webkit-appearance: none; background: transparent; border: 0; box-sizing: border-box; color: #6d7885; color: var(--text_subhead); cursor: pointer; display: flex; height: 100%; justify-content: center; margin: 0; padding: 0; transition: color 0.1s ease-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 50%; z-index: 1; } .vkuiSliderSwitch__button--focus { box-shadow: inset 0 0 0 1px #2688eb; box-shadow: inset 0 0 0 1px var(--accent); } .vkuiSliderSwitch__button--ios { border-radius: 10px; } .vkuiSliderSwitch__button--android, .vkuiSliderSwitch__button--vkcom { border-radius: 8px; } .vkuiSliderSwitch__button--hover { color: #99a2ad; color: var(--text_tertiary); } .vkuiSliderSwitch__border { background-color: #b8c1cc; background-color: var(--toolbar_attach_background_from); height: 28px; left: 50%; opacity: 0.5; position: absolute; top: 8px; width: 1px; } .vkuiSliderSwitch__button--active { color: #000; color: var(--text_primary); transition: -webkit-transform 0.15s ease-in; transition: transform 0.15s ease-in; transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in; } .vkuiSliderSwitch__button--activeHover { color: #000; color: var(--header_alternate_tab_active_text); } .vkuiSliderSwitch__slider { border-radius: 6px; height: 40px; left: 0; margin: 2px; position: absolute; top: 0; transition: -webkit-transform 0.15s; transition: transform 0.15s; transition: transform 0.15s, -webkit-transform 0.15s; width: calc(50% - 4px); } .vkuiSliderSwitch--firstActive { margin-left: 2px; } .vkuiSliderSwitch--firstActive, .vkuiSliderSwitch--secondActive { background-color: #fff; background-color: var(--background_content); } .vkuiSliderSwitch--secondActive { -webkit-transform: translateX(calc(100% + 4px)); transform: translateX(calc(100% + 4px)); } .vkuiPopper { z-index: 100; z-index: var(--vkui--z_index_popout, 100); } .vkuiCustomSelectDropdown { background-color: #fff; background-color: var( --modal_card_background, var(--vkui--color_background_content) ); border: 1px solid rgba(0, 0, 0, 0.12); border: var(--thin-border) solid var(--field_border, var(--vkui--color_field_border_alpha)); border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.06); box-shadow: var( --vkui--elevation1, 0 0 2px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.06) ); box-sizing: border-box; overflow: hidden; } .vkuiCustomSelectDropdown--wide { width: 100%; } .vkuiCustomSelectDropdown--bottom { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .vkuiCustomSelectDropdown--top { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; bottom: 100%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.03), 0 -2px 2px rgba(0, 0, 0, 0.06); box-shadow: var( --vkui--elevation1_invert_y, 0 0 2px rgba(0, 0, 0, 0.03), 0 -2px 2px rgba(0, 0, 0, 0.06) ); } .vkuiCustomSelectDropdown__fetching { padding: 12px 0; } .vkuiCustomSelectDropdown__in { max-height: 160px; } .vkuiCalendarHeader__pickers .vkuiCustomSelectDropdown__in { max-height: 184px; } .vkuiSegmentedControl { background-color: #f5f5f5; background-color: var(--vkui--color_background_secondary, #f5f5f5); border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-sizing: border-box; height: 30px; padding: 2px; } .vkuiSegmentedControl--l { height: 36px; } .vkuiSegmentedControl__in { border-radius: inherit; display: flex; height: 100%; position: relative; transition: all 0.1s ease-out; width: 100%; } .vkuiSegmentedControl__slider { background-color: #fff; background-color: var(--vkui--color_segmented_control, #fff); border-radius: inherit; bottom: 0; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); box-shadow: inset 0 0 0 0.5px var(--vkui--color_image_border_alpha, rgba(0, 0, 0, 0.08)), 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04); left: 0; position: absolute; top: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; transition: -webkit-transform 0.15s; transition: transform 0.15s; transition: transform 0.15s, -webkit-transform 0.15s; } .vkuiSegmentedControl__option { display: block; flex: 1 1; margin: 0; padding: 0; position: relative; z-index: 1; } .vkuiSegmentedControl--sizeY-regular { height: 36px; } .vkuiSegmentedControl--sizeY-regular.vkuiSegmentedControl--l { height: 44px; } .vkuiSegmentedControlOption { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: 0; border-radius: inherit; box-sizing: border-box; color: #000; color: var(--vkui--color_text_primary, #000); cursor: pointer; height: 100%; transition: color 0.1s ease-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vkuiSegmentedControlOption .vkuiIcon { color: #2c2d2e; color: var(--vkui--color_icon_primary, #2c2d2e); } .vkuiSegmentedControlOption:not(.vkuiSegmentedControlOption--checked):hover { opacity: 0.5; } .vkuiSegmentedControlOption__content { align-content: center; align-items: center; border-radius: inherit; display: flex; height: 100%; justify-content: center; width: 100%; } .vkuiVisuallyHiddenInput { clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; opacity: 0; overflow: hidden; position: absolute; white-space: nowrap; } .vkuiCalendar { background: #fff; background: var(--vkui--color_background_modal, #fff); border: 0.5px solid #d7d8d9; border: 0.5px solid var(--vkui--color_separator_primary, #d7d8d9); border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.06); box-shadow: var( --vkui--elevation1, 0 0 2px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.06) ); box-sizing: border-box; display: flex; flex-direction: column; padding: 12px; width: 305px; } .vkuiCalendar__time { border-top: 1px solid #d7d8d9; border-top: 1px solid var(--vkui--color_separator_primary, #d7d8d9); margin: 12px -12px 0; padding: 12px 12px 0; } .vkuiCalendar__header { margin-bottom: 4px; z-index: 1; } .vkuiCalendar--size-s { padding: 8px; width: 220px; } .vkuiCalendar--size-s .vkuiCalendar__header { margin-bottom: 0; } .vkuiCalendarDay { border-radius: 0; color: #000; color: var(--vkui--color_text_primary, #000); font-size: 14px; } .vkuiCalendarDay, .vkuiCalendarDay__hidden { flex-basis: 14.28571%; flex-grow: 0; height: 36px; } .vkuiCalendarDay--size-s, .vkuiCalendarDay__hidden--size-s { height: 34px; } .vkuiCalendarDay--disabled, .vkuiCalendarDay--not-same-month { color: #99a2ad; color: var(--vkui--color_text_tertiary, #99a2ad); } .vkuiCalendarDay--selected { background-color: #f5f5f5; background-color: var(--vkui--color_background_secondary, #f5f5f5); } .vkuiCalendarDay--selection-start.vkuiCalendarDay--selected, .vkuiCalendarDay__hinted--selection-start { border-bottom-left-radius: 8px; border-top-left-radius: 8px; } .vkuiCalendarDay--selection-end.vkuiCalendarDay--selected, .vkuiCalendarDay__hinted--selection-end { border-bottom-right-radius: 8px; border-top-right-radius: 8px; } .vkuiCalendarDay__day-number { text-align: center; } .vkuiCalendarDay--today { font-weight: 600; } .vkuiCalendarDay--today .vkuiCalendarDay__day-number:after { border-bottom: 2px solid #2688eb; border-bottom: 2px solid var(--vkui--color_stroke_accent, #2688eb); content: ""; display: block; left: 50%; position: relative; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 16px; } .vkuiCalendarDay--today .vkuiCalendarDay__inner--active .vkuiCalendarDay__day-number:after { border-bottom-color: #fff; border-bottom-color: var(--vkui--color_stroke_contrast, #fff); } .vkuiCalendarDay__hinted, .vkuiCalendarDay__inner { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } .vkuiCalendarDay__inner { border-radius: 8px; } .vkuiCalendarDay--hover :not(.vkuiCalendarDay__hinted--active) .vkuiCalendarDay__inner, .vkuiCalendarDay__hinted--active { background-color: rgba(0, 0, 0, 0.08); background-color: var( --vkui--color_background_secondary_alpha--hover, rgba(0, 0, 0, 0.08) ); } .vkuiCalendarDay__inner--active { background-color: #2688eb; background-color: var(--vkui--color_background_accent, #2688eb); color: #fff; color: var(--vkui--color_text_contrast, #fff); } .vkuiCalendarDays { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-around; } .vkuiCalendarDays__row { display: flex; flex-grow: 1; justify-content: center; } .vkuiCalendarDays__row:not(:last-child) { margin-bottom: 4px; } .vkuiCalendarDays__row--size-s:not(:last-child) { margin-bottom: 0; } .vkuiCalendarDays__weekday { color: #6d7885; color: var(--vkui--color_text_subhead, #6d7885); flex-basis: 14.28571%; flex-grow: 0; height: 32px; text-transform: capitalize; } .vkuiCalendarDays__weekday, .vkuiCalendarHeader { align-items: center; display: flex; justify-content: center; } .vkuiCalendarHeader { min-height: 36px; position: relative; } .vkuiCalendarHeader__pickers { display: flex; position: absolute; } .vkuiCalendarHeader__picker + .vkuiCalendarHeader__picker { margin-left: 4px; } .vkuiCalendarHeader__nav-icon { align-items: center; display: flex; justify-content: center; padding: 3px; position: absolute; } .vkuiCalendarHeader__nav-icon--accent { color: #2688eb; color: var(--vkui--color_icon_accent, #2688eb); } .vkuiCalendarHeader__nav-icon-next { right: 0; } .vkuiCalendarHeader__nav-icon-prev { left: 0; } .vkuiCalendarHeader__month { text-transform: capitalize; } .vkuiCalendarRange { background: #fff; background: var(--vkui--color_background_modal, #fff); border: 0.5px solid #d7d8d9; border: 0.5px solid var(--vkui--color_separator_primary, #d7d8d9); border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.06); box-shadow: var( --vkui--elevation1, 0 0 2px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.06) ); box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-around; padding: 12px; width: 610px; } .vkuiCalendarRange__inner { display: flex; flex-direction: column; flex-grow: 1; } .vkuiCalendarRange__inner:not(:last-child) { margin-right: 24px; } .vkuiCalendarRange__header { margin-bottom: 4px; z-index: 1; } .vkuiCalendarTime { align-items: center; display: flex; } .vkuiCalendarTime__picker { width: 77px; } .vkuiCalendarTime__divider { color: #000; color: var(--vkui--color_text_primary, #000); margin-left: 6px; margin-right: 6px; } .vkuiCalendarTime__button { margin-left: auto; } .vkuiInputLike__mask { position: relative; } .vkuiInputLike__mask:after { border-bottom: 1px solid #818c99; border-bottom: 1px solid var(--vkui--color_text_secondary, #818c99); bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: calc(100% - 0.1em); } .vkuiInputLike__mask:last-child { margin-right: 1px; } .vkuiInputLike__last_character { letter-spacing: 1px !important; } .vkuiInputLike--full + .vkuiInputLikeDivider { color: #000; color: var(--vkui--color_text_primary, #000); } .vkuiInputLikeDivider { color: #818c99; color: var(--vkui--color_text_secondary, #818c99); letter-spacing: 1px !important; } .vkuiDateInput__input { -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; cursor: text; flex-grow: 1; font-size: 16px; font-variant-numeric: tabular-nums; margin-left: 10px; margin-right: 14px; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; white-space: nowrap; z-index: 6; } .vkuiDateInput__input-time-divider { letter-spacing: 6px !important; } .vkuiDateInput--sizeY-compact .vkuiDateInput__input { font-size: 15px; margin-right: 22px; } .vkuiDateRangeInput__input { -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; cursor: text; flex-grow: 1; font-size: 16px; font-variant-numeric: tabular-nums; margin-left: 10px; margin-right: 14px; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; white-space: nowrap; z-index: 6; } .vkuiDateRangeInput--sizeY-compact .vkuiDateRangeInput__input { font-size: 15px; margin-right: 22px; } .vkuiPromoBanner { background: #fff; background: var(--background_content, var(--vkui--color_background_content)); box-sizing: border-box; color: #000; color: var(--text_primary, var(--vkui--color_text_primary)); outline: 1px solid rgba(0, 0, 0, 0.12); outline: var(--thin-border) solid rgba(0, 0, 0, 0.12); outline: var(--thin-border) solid var(--separator_alpha, var(--vkui--color_separator_primary_alpha)); padding-bottom: 10px; position: relative; width: 100%; } .vkuiPromoBanner__head { color: #818c99; color: var(--text_secondary, var(--vkui--color_text_secondary)); display: flex; padding: 14px 16px 10px; padding: 14px var(--vkui--size_base_padding_horizontal--regular, 16px) 10px; } .vkuiPromoBanner__age { margin-left: 6px; } .vkuiPromoBanner__close { align-items: center; color: #99a2ad; color: var( --placeholder_icon_foreground_primary, var(--vkui--color_icon_secondary) ); display: flex; height: 48px; justify-content: center; position: absolute; right: 0; top: 0; width: 48px; } .vkuiPromoBanner__close:active { opacity: 0.7; } .vkuiPromoBanner__pixels { display: none; } .vkui > body { overflow-x: hidden; } .vkui, .vkui > body, .vkui__root { height: 100%; margin: 0; padding: 0; } .vkui, .vkui > body, .vkui__portal-root, .vkui__root { -webkit-font-smoothing: subpixel-antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; color: #000; color: var(--text_primary); font-family: -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif; font-family: var(--font-common); } .vkui__portal-root button, .vkui__portal-root input, .vkui__portal-root select, .vkui__portal-root textarea, .vkui__root button, .vkui__root input, .vkui__root select, .vkui__root textarea { font-family: inherit; } .vkui__portal-root :focus, .vkui__root :focus { outline: none; } .vkuiChipsSelect { position: relative; } .vkuiChipsSelect__dropdown { cursor: pointer; } .vkuiChipsSelect__icon { pointer-events: none; } .vkuiChipsSelect__empty { color: #818c99; color: var(--vkui--color_text_secondary); color: var(--text_secondary, var(--vkui--color_text_secondary)); padding: 12px 0; text-align: center; } .vkuiSimpleCheckbox { border-radius: 50%; display: block; height: 24px; margin: -10px; padding: 10px; width: 24px; } .vkuiSimpleCheckbox__input { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; } .vkuiSimpleCheckbox__container { align-items: flex-start; display: flex; justify-content: flex-start; } .vkuiSimpleCheckbox__icon { border-radius: 4px; box-sizing: border-box; display: flex; flex-shrink: 0; margin: 0; } .vkuiSimpleCheckbox__icon--indeterminate, .vkuiSimpleCheckbox__icon--on { color: #2688eb; color: var(--accent); display: none; } .vkuiSimpleCheckbox__icon--off { color: #b8c1cc; color: var(--icon_tertiary); } .vkuiSimpleCheckbox__input:checked ~ .vkuiSimpleCheckbox__container .vkuiSimpleCheckbox__icon--on { display: flex; } .vkuiSimpleCheckbox__input:checked ~ .vkuiSimpleCheckbox__container .vkuiSimpleCheckbox__icon--off, .vkuiSimpleCheckbox__input:indeterminate ~ .vkuiSimpleCheckbox__container .vkuiSimpleCheckbox__icon--indeterminate { display: none; } .vkuiSimpleCheckbox__input:indeterminate ~ .vkuiSimpleCheckbox__container .vkuiSimpleCheckbox__icon--indeterminate { display: flex; } .vkuiSimpleCheckbox__input:indeterminate ~ .vkuiSimpleCheckbox__container .vkuiSimpleCheckbox__icon--off, .vkuiSimpleCheckbox__input:indeterminate ~ .vkuiSimpleCheckbox__container .vkuiSimpleCheckbox__icon--on { display: none; } .vkuiSimpleCheckbox__input[disabled] ~ .vkuiSimpleCheckbox__container { opacity: 0.6; } .vkuiSimpleCheckbox--android.vkuiSimpleCheckbox--sizeY-compact, .vkuiSimpleCheckbox--ios.vkuiSimpleCheckbox--sizeY-compact { height: 20px; margin: -8px; padding: 8px; width: 20px; } .vkuiSimpleCheckbox--vkcom { border-radius: 4px; height: 22px; margin: 0; padding: 0; width: 22px; } .vkuiSimpleCheckbox--vkcom .vkuiSimpleCheckbox__activeShadow, .vkuiSimpleCheckbox--vkcom .vkuiSimpleCheckbox__hoverShadow { border-radius: inherit; bottom: 0; height: 16px; left: 0; margin: 3px; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; transition: inherit; width: 16px; } .vkuiSimpleCheckbox--vkcom.vkuiSimpleCheckbox--active .vkuiSimpleCheckbox__activeShadow { background-color: rgba(0, 0, 0, 0.08); background-color: var(--background_highlighted); } .vkuiSimpleCheckbox--vkcom.vkuiSimpleCheckbox--hover .vkuiSimpleCheckbox__hoverShadow { background-color: rgba(0, 0, 0, 0.04); background-color: var(--background_hover); } .vkuiSimpleCheckbox--vkcom .vkuiSimpleCheckbox__icon { border-radius: 3px; border-width: 1px; padding: 1px; } .vkuiSimpleCheckbox--vkcom .vkuiSimpleCheckbox__input[disabled] ~ .vkuiSimpleCheckbox__container { opacity: 0.4; } .vkuiDropdown { -webkit-animation: vkui-popper-fadein 0.2s ease; animation: vkui-popper-fadein 0.2s ease; background: #fff; background: var(--vkui--color_background_modal); background: var(--modal_card_background, var(--vkui--color_background_modal)); border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); position: relative; } .vkuiDropdown:before { bottom: -8px; bottom: calc(var(--popover-safe-zone-padding) * -1); content: ""; left: -8px; left: calc(var(--popover-safe-zone-padding) * -1); position: absolute; right: -8px; right: calc(var(--popover-safe-zone-padding) * -1); top: -8px; top: calc(var(--popover-safe-zone-padding) * -1); z-index: -1; } .vkuiTextTooltip { -webkit-animation: vkui-popper-fadein 0.2s ease; animation: vkui-popper-fadein 0.2s ease; background-color: #fff; background-color: var(--vkui--color_background_modal, #fff); border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); color: #000; color: var(--vkui--color_text_primary, #000); padding: 8px 12px 9px; } .vkuiTextTooltip__arrow { color: #fff; color: var(--vkui--color_background_modal, #fff); } .vkuiTextTooltip--accent { background-color: #5a9eff; background-color: var(--vkui--color_background_accent_tint, #5a9eff); color: #fff; color: var(--vkui--color_text_contrast, #fff); } .vkuiTextTooltip--accent .vkuiTextTooltip__arrow { color: #5a9eff; color: var(--vkui--color_background_accent_tint, #5a9eff); } .vkuiTextTooltip--white { background-color: #fff; background-color: var(--vkui--color_background_contrast, #fff); color: #000; color: var(--vkui--color_text_primary_invariably, #000); } .vkuiTextTooltip--white .vkuiTextTooltip__arrow { color: #fff; color: var(--vkui--color_background_contrast, #fff); } .vkuiTextTooltip--black { background-color: #2d2d2e; background-color: var(--vkui--color_background_contrast_inverse, #2d2d2e); color: #fff; color: var(--vkui--color_text_contrast, #fff); } .vkuiTextTooltip--black .vkuiTextTooltip__arrow { color: #2d2d2e; color: var(--vkui--color_background_contrast_inverse, #2d2d2e); } .vkuiTextTooltip--inversion { background-color: #2d2d2e; background-color: var(--vkui--color_background_modal_inverse, #2d2d2e); color: #fff; color: var(--vkui--color_text_contrast_themed, #fff); } .vkuiTextTooltip--inversion .vkuiTextTooltip__arrow { color: #2d2d2e; color: var(--vkui--color_background_modal_inverse, #2d2d2e); } .vkuiRichTooltip { -webkit-animation: vkui-popper-fadein 0.2s ease; animation: vkui-popper-fadein 0.2s ease; background-color: #fff; background-color: var(--vkui--color_background_modal); background-color: var( --background_content, var(--vkui--color_background_modal) ); border-radius: 8px; border-radius: var(--vkui--size_border_radius--regular, 8px); box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: var( --vkui--elevation3, 0 0 2px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.08) ); color: #000; color: var(--vkui--color_text_primary, #000); } .vkuiRichTooltip__arrow { color: #fff; color: var(--vkui--color_background_modal); color: var(--background_content, var(--vkui--color_background_modal)); } .vkuiRichTooltip--accent { background-color: #5a9eff; background-color: var(--vkui--color_background_accent_tint, #5a9eff); color: #fff; color: var(--vkui--color_text_contrast, #fff); } .vkuiRichTooltip--accent .vkuiRichTooltip__arrow { color: #5a9eff; color: var(--vkui--color_background_accent_tint, #5a9eff); } .vkuiRichTooltip--white { background-color: #fff; background-color: var(--vkui--color_background_contrast, #fff); color: #000; color: var(--vkui--color_text_primary_invariably, #000); } .vkuiRichTooltip--white .vkuiRichTooltip__arrow { color: #fff; color: var(--vkui--color_background_contrast, #fff); } .vkuiRichTooltip--black { background-color: #2d2d2e; background-color: var(--vkui--color_background_contrast_inverse, #2d2d2e); color: #fff; color: var(--vkui--color_text_contrast, #fff); } .vkuiRichTooltip--black .vkuiRichTooltip__arrow { color: #2d2d2e; color: var(--vkui--color_background_contrast_inverse, #2d2d2e); } .vkuiRichTooltip--inversion { background-color: #2d2d2e; background-color: var(--vkui--color_background_modal_inverse, #2d2d2e); color: #fff; color: var(--vkui--color_text_contrast_themed, #fff); } .vkuiRichTooltip--inversion .vkuiRichTooltip__arrow { color: #2d2d2e; color: var(--vkui--color_background_modal_inverse, #2d2d2e); } @font-face { font-family: Wix Madefor Display; src: url(../../static/media/WixMadeforDisplay-Regular.2acfbfaa8ee30ac9b8ae.ttf); } @font-face { font-family: Wix Madefor Display Medium; src: url(../../static/media/WixMadeforDisplay-Medium.1a4aeafec2f1ae4eb436.ttf); } @font-face { font-family: Wix Madefor Display Semibold; src: url(../../static/media/WixMadeforDisplay-SemiBold.7dc5713259442e0b332b.ttf); } @font-face { font-family: Wix Madefor Display Bold; src: url(../../static/media/WixMadeforDisplay-Bold.98543e2023a91502975f.ttf); } @font-face { font-family: Wix Madefor Display Extrabold; src: url(../../static/media/WixMadeforDisplay-ExtraBold.76109d0d7a3c1b4bac4b.ttf); } @font-face { font-family: Dela Gothic One; src: url(../../static/media/DelaGothicOne-Regular.3e6423cef8188d3106d3.ttf); } body[scheme="bright_light"] { --color_primary: #1b354d; --background_content: #fff; } body.os-ios { --font-fallback: "SF Pro"; } body.os-android { --font-fallback: "Roboto"; } body.os-windows { --font-fallback: "Arial"; } h1, h2, h3, img, label, p, span, svg { margin: 0; -webkit-user-select: none; user-select: none; } ::-webkit-scrollbar { display: none; } #root, .vkuiPanel, .vkuiPanel .vkuiPanel__in, .vkuiPanel:after, body, html { background: var(--background_content); } .vkuiPanel .vkuiPanel__in { padding-bottom: var(--safe-area-inset-bottom); padding-top: var(--safe-area-inset-top); } @-webkit-keyframes vkui-animation-ios-next-forward { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes vkui-animation-ios-next-forward { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes vkui-animation-view-next-forward { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes vkui-animation-view-next-forward { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } } @-webkit-keyframes vkui-animation-ios-prev-forward { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } @keyframes vkui-animation-ios-prev-forward { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } @-webkit-keyframes vkui-animation-view-prev-forward { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } @keyframes vkui-animation-view-prev-forward { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } @-webkit-keyframes vkui-animation-ios-prev-back { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes vkui-animation-ios-prev-back { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @-webkit-keyframes vkui-animation-view-prev-back { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes vkui-animation-view-prev-back { 0% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .vkuiView__panel--next { -webkit-animation: vkui-animation-ios-next-back 0.6s var(--ios-easing); animation: vkui-animation-ios-next-back 0.6s var(--ios-easing); } .vkuiView__panel--prev { -webkit-animation: vkui-animation-ios-prev-forward 0.6s var(--ios-easing); animation: vkui-animation-ios-prev-forward 0.6s var(--ios-easing); } .vkuiView__panel--next ~ .vkuiView__panel--prev { -webkit-animation: vkui-animation-ios-prev-back 0.6s var(--ios-easing) forwards; animation: vkui-animation-ios-prev-back 0.6s var(--ios-easing) forwards; } input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; background-color: #fff; background-position: 50%; background-repeat: no-repeat; background-size: 50% 50%; border-radius: 4px; height: 20px; margin: 0; max-height: 20px; max-width: 20px; min-height: 20px; min-width: 20px; width: 20px; } input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.166 11.775c-.454 0-.89-.18-1.21-.502L.295 7.615a1.009 1.009 0 0 1 1.426-1.427l3.444 3.444L14.278.52a1.009 1.009 0 0 1 1.427 1.427l-9.328 9.326a1.71 1.71 0 0 1-1.21.502Z' fill='%23202A46'/%3E%3C/svg%3E"); background-size: 16px; } body:has(.custom-tab-bar) .vkuiSnackbar { margin-bottom: calc(var(--safe-area-inset-bottom) + 105px); } .vkuiSnackbar > .vkuiSnackbar__in > .vkuiSnackbar__body > .vkuiSnackbar__content > .vkuiSnackbar__content-text { font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; font-style: normal; font-weight: 510; letter-spacing: -0.04em; line-height: 130%; } .vkuiSnackbar > .vkuiSnackbar__in > .vkuiSnackbar__body { border-radius: 20px; padding: 20px; } .vkuiSnackbar.error > .vkuiSnackbar__in > .vkuiSnackbar__body { background: #b40c2e; color: #fff; } .vkuiSnackbar.error > .vkuiSnackbar__in > .vkuiSnackbar__body > .vkuiSnackbar__content > .vkuiSnackbar__content-text { color: #fff; } .audio-player { align-items: center; display: flex; gap: 30px; } .audio-player > :first-child { align-items: center; background-color: #e05757; border-radius: 50%; cursor: pointer; display: flex; height: 100px; justify-content: center; width: 100px; } .audio-player > :nth-child(2) { align-items: center; display: flex; gap: 6px; } .audio-player > :nth-child(2) > * { border-radius: 5px; width: 16px; } .audio-player > :nth-child(3) { font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 32px; letter-spacing: -0.03em; line-height: 40px; mix-blend-mode: difference; text-align: center; } .unsubscribe-alert { -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); background: hsla(0, 0%, 100%, 0.5); height: 100vh; position: fixed; width: 100vw; } .unsubscribe-alert > .card { align-items: center; background: linear-gradient(71.62deg, #121212 1.39%, #531616 100.21%); border-radius: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 50px; left: 50%; overflow: hidden; padding: 60px 50px; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60%; } .unsubscribe-alert > .card > svg { bottom: -700px; left: 50%; opacity: 0.5; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 150%; } .unsubscribe-alert > .card > h1 { font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 36px; line-height: 140%; } .unsubscribe-alert > .card > button, .unsubscribe-alert > .card > h1 { color: #fff; letter-spacing: -0.03em; text-align: center; z-index: 1; } .unsubscribe-alert > .card > button { background-color: #e05757; border-radius: 20px 0 20px 20px; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; height: 80px; line-height: 30%; width: 100%; } @media screen and (max-width: 630px), screen and (orientation: portrait) { .unsubscribe-alert > .card { border-radius: 20px 0 20px 20px; gap: 25px; padding: 30px 20px; width: 80%; } .unsubscribe-alert > .card > svg { display: none; } .unsubscribe-alert > .card > h1 { font-size: 24px; } .unsubscribe-alert > .card > button { font-size: 20px; } } body[scheme="bright_light"]:has(#main) { --background_content: #fff; } #main.vkuiPanel .vkuiPanel__in { align-items: center; display: flex; flex-direction: column; overflow: hidden; overflow-y: scroll; } #main.vkuiPanel .vkuiPanel__in > * { position: relative; width: 100vw; } button { border: none; cursor: pointer; outline: none; } #main.vkuiPanel .vkuiPanel__in > .header, button { align-items: center; display: flex; justify-content: space-around; } #main.vkuiPanel .vkuiPanel__in > .header { gap: 5.67708333333vw; margin: 31.5px auto; } #main.vkuiPanel .vkuiPanel__in > .header > svg { color: #323443; height: 27px; width: 210px; } #main.vkuiPanel .vkuiPanel__in > .header > .tabs { align-items: center; display: flex; gap: 30px; } #main.vkuiPanel .vkuiPanel__in > .header > .tabs > * { color: #636363; cursor: pointer; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 16px; letter-spacing: -0.03em; line-height: 20px; } #main.vkuiPanel .vkuiPanel__in > .header > a { background-color: #e05757; border-radius: 50px; color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; padding: 21.5px 50px; } #main.vkuiPanel .vkuiPanel__in > .container-1 { display: flex; gap: 80px; justify-content: center; margin: 88px auto 0; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child { width: 572px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :first-child { align-items: center; display: flex; gap: 22px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :first-child > img { height: 170.01px; rotate: -9.98deg; width: 187.29px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :first-child > h1 { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) { display: flex; margin-top: 51px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :first-child, #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :last-child, #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(3) { font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; height: 24px; letter-spacing: -0.03em; line-height: 30px; position: relative; white-space: nowrap; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :first-child { background: #e6e6e6; border-radius: 0 20px 20px 20px; color: #000; padding: 40px 71px; width: 166px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :last-child { background: #e05757; border-radius: 20px 0 20px 20px; color: #fff; margin-left: -32px; margin-top: 47px; padding: 40px 69px; width: 139px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(3) { background: #000; border-radius: 20px; color: #fff; margin-top: 30px; padding: 40px 50px; width: 455px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :first-child:before, #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :last-child:before, #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(3):before { align-items: center; border-radius: 50%; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; height: 46px; justify-content: center; left: -14px; letter-spacing: -0.03em; line-height: 30px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 46px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :first-child:before { background-color: #e05757; color: #fff; content: "1"; rotate: -5deg; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :last-child:before { background-color: #fa8282; color: #fff; content: "2"; rotate: 5deg; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(3):before { background-color: #fd4a69; color: #fff; content: "3"; rotate: 5deg; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) { background: #121212; border-radius: 35px 0 35px 35px; display: flex; flex-direction: column; padding: 40px; rotate: -2deg; width: 520px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child { align-items: center; display: flex; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child > :first-child, #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child > :nth-child(2) { border-radius: 50%; height: 51px; width: 51px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child > :nth-child(2) { margin-left: -20px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child > :nth-child(3) { color: #fff; margin-left: 15px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(2) { color: #fff; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; margin-top: 40px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) { display: flex; flex-direction: column; gap: 15px; margin-top: 49px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > * { align-items: center; border-radius: 20px; display: flex; gap: 10px; height: 80px; justify-content: center; width: 100%; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > * > p { font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > * > img { height: 40px; width: 40px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > * > span { align-items: center; background-color: #fff; border-radius: 8px; color: #000; display: flex; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 16px; height: 29px; justify-content: center; letter-spacing: -0.03em; line-height: 20px; width: 38px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > :first-child { background-color: #51b551; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > :first-child > p { color: #fff; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > :nth-child(2) { background-color: #fd4a6a; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > :nth-child(2) > p { color: #fff; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > :nth-child(3) { background-color: #e6e6e6; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > :nth-child(3) > p { color: #000; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > :nth-child(4) { background-color: #2e2e2e; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > :nth-child(4) > p { color: #fff; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(3) { position: absolute; top: -400px; width: 100%; z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .container-2 { margin: 96px auto 0; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :first-child { background: linear-gradient(71.62deg, #121212 1.39%, #531616 100.21%); border-radius: 35px; height: 743px; left: 50%; position: absolute; rotate: -2deg; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1300px; z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(2) { height: 778px; left: 50%; margin-left: -246px; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 865px; z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(3) { color: #fff; margin: 120px -420px 0 0; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(3), #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(4) { font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; text-align: center; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(4) { color: #ff8484; margin: 24px -420px 0 0; rotate: -2deg; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5), #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) { display: flex; gap: 20px; justify-content: center; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) { margin: 50px auto 0; -webkit-transform: translateX(7%); transform: translateX(7%); } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) { margin: 30px auto 0; -webkit-transform: translateX(12%); transform: translateX(12%); } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) > div, #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) > div { align-items: center; border-radius: 50%; display: flex; height: 80px; justify-content: center; width: 80px; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) > div > svg, #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) > div > svg { height: 50px; width: 50px; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) > div { background-color: #e05757; color: #fff; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) > div { background-color: #fff; color: #e05757; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) > p, #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) > p { font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 32px; letter-spacing: -0.03em; line-height: 40px; padding: 40px 50px; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) > p { background-color: #e6e6e6; border-radius: 0 20px 20px 20px; color: #000; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) > p { background-color: #e05757; border-radius: 20px 0 20px 20px; color: #fff; width: 580px; } #main.vkuiPanel .vkuiPanel__in > .container-3 { display: flex; gap: 49px; height: 758px; margin: 200px auto 0; width: 1200px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child { display: flex; flex-direction: column; gap: 24px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > img { border-radius: 35px; height: 320px; object-fit: contain; width: 470px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > div, #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > div > * { align-items: center; display: flex; gap: 10px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > div > * { border-radius: 40px; color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; padding: 15px 53px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > div > :first-child { background-color: #e05757; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > div > :last-child { background-color: #000; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child { background-color: #e05757; border-radius: 35px; display: flex; flex-direction: column; gap: 50px; padding: 80px 41px 80px 50px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :first-child { display: flex; gap: 10px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :first-child > :first-child { color: #fff; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; width: 351px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :first-child > :last-child { height: 206px; width: 229px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :nth-child(2) { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 32px; letter-spacing: -0.03em; line-height: 140%; width: 553px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :nth-child(3) { align-items: center; background-color: #e6e6e6; border-radius: 25px; display: flex; gap: 20px; padding: 35px 39px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :nth-child(3) > :first-child { align-items: center; background-color: #e05757; border-radius: 50%; color: #fff; display: flex; height: 64px; justify-content: center; width: 64px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :nth-child(3) > :last-child { color: #000; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 32px; letter-spacing: -0.03em; line-height: 40px; } #main.vkuiPanel .vkuiPanel__in > .container-4 { align-items: center; display: flex; flex-direction: column; gap: 60px; justify-content: center; margin: 200px auto 0; width: 851px; } #main.vkuiPanel .vkuiPanel__in > .container-4 > svg { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .container-4 > img[alt="img1"] { height: 128px; left: -20%; position: absolute; top: 258px; width: 131px; z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .container-4 > img[alt="img2"] { height: 160px; position: absolute; right: -20%; top: 342px; width: 160px; z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .container-4 > :first-child { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; } #main.vkuiPanel .vkuiPanel__in > .container-4 > :nth-child(2) { z-index: 1; } #main.vkuiPanel .vkuiPanel__in > .container-4 > :nth-child(3) { color: #000; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 32px; letter-spacing: -0.03em; line-height: 40px; text-align: center; width: 716px; } #main.vkuiPanel .vkuiPanel__in > .container-5 { height: 678px; margin: 300px auto 0; width: 1300px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :first-child { background: linear-gradient(71.62deg, #531616 1.39%, #121212 100.21%); border-radius: 35px; height: inherit; left: 50%; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: inherit; z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(2) { bottom: 0; height: 820px; position: absolute; right: 0; width: 793px; z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(3) { color: #fff; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; margin: 101px 0 0 72px; width: 590px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(4) { background: #e05757; border-radius: 25px; color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 48px; letter-spacing: -0.03em; line-height: 110%; margin: 40px 0 0 72px; padding: 35px 45px; width: 566px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(4) > span { font-family: "Wix Madefor Display Extrabold", var(--font-fallback); } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(5) { align-items: center; display: flex; gap: 15px; margin: 80px 0 0 72px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(5) > :first-child { align-items: center; background-color: #e05757; border-radius: 50%; display: flex; height: 50px; justify-content: center; width: 50px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(5) > :first-child > svg { color: #fff; height: 30px; width: 30px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(5) > :last-child { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 28px; letter-spacing: -0.03em; line-height: 35px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(6) { margin: 35px 0 0 72px; position: relative; z-index: 1; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(6) > :last-child { color: #fff; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(7) { background-color: #000; border-radius: 20px; bottom: 75px; color: #fff; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; padding: 35px; position: absolute; right: 63px; width: 294px; } #main.vkuiPanel .vkuiPanel__in > .container-6 { margin: 200px auto 0; width: 1200px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child { align-items: center; display: flex; gap: 50px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :first-child { align-items: center; background: #f2f2f2; border-radius: 250px 250px 250px 0; display: flex; height: 360px; justify-content: center; min-width: 360px; width: 360px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :first-child > img { height: 360px; rotate: -5deg; width: 212px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child { display: flex; flex-direction: column; gap: 50px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :first-child { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :nth-child(2) { color: #e05757; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 48px; letter-spacing: -0.03em; line-height: 110%; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :nth-child(3) { align-items: center; background-color: #e05757; border-radius: 25px; display: flex; gap: 20px; justify-content: center; padding: 35px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :nth-child(3) > :first-child { align-items: center; background-color: #fff; border-radius: 50%; color: #000; display: flex; height: 64px; justify-content: center; width: 64px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :nth-child(3) > :last-child { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 28px; letter-spacing: -0.03em; line-height: 35px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) { grid-gap: 80px 97px; display: grid; gap: 80px 97px; grid-template-columns: repeat(auto-fill, 320px); justify-content: center; margin-top: 100px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * { display: flex; flex-direction: column; gap: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :first-child { align-items: center; display: flex; gap: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :first-child > :first-child { border-radius: 150px 150px 150px 0; height: 144px; width: 144px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :first-child > :last-child { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 32px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; width: 180px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :last-child > :first-child { height: 36px; min-width: 36px; width: 36px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :last-child > :first-child > svg { height: 20px; width: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :last-child > :nth-child(3) { color: #000; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 16px; letter-spacing: -0.03em; line-height: 20px; text-align: center; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(3) { background-color: #e05757; border-radius: 25px; color: #fff; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; margin-top: 100px; padding: 35px; position: relative; text-align: center; -webkit-user-select: none; user-select: none; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(3) > img[alt="img1"] { height: 90px; left: 144px; position: absolute; top: -53px; width: 90px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(3) > img[alt="img2"] { bottom: -27px; height: 54px; position: absolute; right: 95px; width: 54px; } #main.vkuiPanel .vkuiPanel__in > .container-7 { align-items: center; display: flex; gap: 58px; margin: 200px auto 0; padding-bottom: 200px; width: 1200px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child > :first-child { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; width: 591px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child > :nth-child(2) { color: #e05757; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 36px; letter-spacing: -0.03em; line-height: 110%; margin-top: 40px; width: 543px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child > :nth-child(3) { color: #b9b9b9; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 32px; letter-spacing: -0.03em; line-height: 40px; margin-top: 40px; width: 591px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child > :nth-child(4) { background-color: #e05757; border-radius: 50px; color: #fff; font-family: "Wix Madefor Display", var(--font-fallback); font-size: 32px; letter-spacing: -0.03em; line-height: 40px; margin-top: 60px; padding: 40px 150px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :first-child { color: #e05757; font-family: "Wix Madefor Display Extrabold", var(--font-fallback); font-size: 36px; letter-spacing: -0.03em; line-height: 110%; text-align: center; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) { display: flex; margin-top: 40px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) > * { align-items: center; cursor: pointer; display: flex; flex-direction: column; gap: 30px; justify-content: center; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) > :last-child { margin-left: -50px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) > * > :first-child { border-radius: 50%; height: 280px; width: 280px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) > * > :last-child { color: #000; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 32px; letter-spacing: -0.03em; line-height: 40px; text-align: center; } #main.vkuiPanel .vkuiPanel__in > .container-7 > img[alt="heart1"] { height: 115px; left: -115px; position: absolute; rotate: -30deg; top: 229px; width: 108px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > img[alt="heart2"] { height: 89.6px; left: 50%; position: absolute; rotate: 30deg; top: -89px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > svg { height: auto; margin-top: -200px; position: absolute; width: 100%; z-index: -1; } #main.vkuiPanel .vkuiPanel__in > .footer { align-items: center; background-color: #121212; display: flex; justify-content: space-around; padding: 77px 360px; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child { display: flex; gap: 120px; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { display: flex; flex-direction: column; gap: 30px; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child > * > p:has(span) > span { color: #636681; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child > :first-child > :last-child, #main.vkuiPanel .vkuiPanel__in > .footer > :last-child > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #main.vkuiPanel .vkuiPanel__in > .header { gap: initial; justify-content: space-around; } #main.vkuiPanel .vkuiPanel__in > .header > svg { height: 50px; width: 100px; } #main.vkuiPanel .vkuiPanel__in > .header > .tabs { display: none; } #main.vkuiPanel .vkuiPanel__in > .header > a { font-size: 16px; line-height: 100%; } #main.vkuiPanel .vkuiPanel__in > .container-1 { flex-direction: column; gap: 40px; margin-top: 28px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child { gap: 12px; margin-left: 24px; margin-right: 24px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :first-child { gap: initial; justify-content: space-around; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :first-child > img { height: 93px; rotate: 0deg; width: 103px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :first-child > h1 { font-size: 28px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) { margin-top: 30px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :first-child:before, #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :last-child:before, #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(3):before { font-size: 15px; height: 30px; rotate: 0deg; width: 30px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :first-child, #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :last-child, #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(3) { font-size: 14px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; line-height: 18px; padding: 20px 39px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :first-child { border-radius: 0 10px 10px 10px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(2) > :last-child { border-radius: 10px 0 10px 10px; margin-left: auto; margin-right: 0; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :first-child > :nth-child(3) { border-radius: 10px; height: auto; margin-top: 15px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) { border-radius: 20px 0 20px 20px; margin-left: 24px; margin-right: 24px; padding: 20px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child > :first-child, #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child > :nth-child(2) { height: 30px; width: 30px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child > :nth-child(2) { margin-left: -8px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :first-child > :nth-child(3) { margin-left: 5px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(2) { font-size: 28px; margin-top: 10px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) { margin-top: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > * { gap: 5px; height: auto; padding: 15px 25px; width: auto; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > * > img { height: 20px; width: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > * > p { font-size: 16px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(2) > :nth-child(3) > * > span { height: 22px; width: 28px; } #main.vkuiPanel .vkuiPanel__in > .container-1 > :nth-child(3) { display: none; } #main.vkuiPanel .vkuiPanel__in > .container-2 { display: flex; flex-direction: column; margin-left: 24px; margin-right: 24px; margin-top: 32px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :first-child { border-radius: 20px; height: calc(100% - 13px); rotate: 0deg; width: 100%; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(2) { display: block; height: 371px; margin: 0 0 0 20px; order: 3; position: relative; rotate: 2deg; width: 415px; z-index: 2; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(3) { font-size: 20px; margin: 20px auto 0; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(4) { font-size: 20px; margin: 20px auto 0; rotate: 0deg; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) { gap: 10px; margin: 30px auto 0; -webkit-transform: none; -webkit-transform: initial; transform: none; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) > div, #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) > div { height: 30px; min-width: 30px; width: 30px; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) > div > svg, #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) > div > svg { height: 20px; width: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(5) > p, #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) > p { font-size: 16px; line-height: 20px; padding: 10px 30px; width: 185px; } #main.vkuiPanel .vkuiPanel__in > .container-2 > :nth-child(6) { gap: 10px; margin: 20px auto 0; -webkit-transform: none; -webkit-transform: initial; transform: none; } #main.vkuiPanel .vkuiPanel__in > .container-3 { flex-direction: column; gap: 20px; height: auto; margin-left: 24px; margin-right: 24px; margin-top: 36px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child { border-radius: 20px; gap: 10px; padding: 30px 25px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :first-child { align-items: center; gap: 5px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :first-child > :first-child { font-size: 20px; width: auto; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :first-child > :last-child { height: 100px; width: 110px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :nth-child(2) { font-size: 16px; width: auto; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :nth-child(3) { border-radius: 12.5px; padding: 12px 16px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :nth-child(3) > :first-child { height: 32px; min-width: 32px; width: 32px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :last-child > :nth-child(3) > :last-child { font-size: 16px; line-height: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child { gap: 10px; order: 2; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > img { border-radius: 17.5px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > div > * { justify-content: center; padding: 10px; width: 100%; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > div > * > svg { height: 24px; width: 24px; } #main.vkuiPanel .vkuiPanel__in > .container-3 > :first-child > div > * > p { font-size: 16px; } #main.vkuiPanel .vkuiPanel__in > .container-4 { gap: 0; margin-left: 24px; margin-right: 24px; margin-top: 150px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-4 > svg { display: none; } #main.vkuiPanel .vkuiPanel__in > .container-4 > :first-child { font-size: 20px; text-align: center; width: 226px; } #main.vkuiPanel .vkuiPanel__in > .container-4 > .audio-player { scale: 0.5; } #main.vkuiPanel .vkuiPanel__in > .container-4 > :nth-child(3) { font-size: 16px; line-height: 20px; width: 320px; } #main.vkuiPanel .vkuiPanel__in > .container-4 > img[alt="img1"] { left: 30px; scale: 0.4; top: -120px; } #main.vkuiPanel .vkuiPanel__in > .container-4 > img[alt="img2"] { right: 10%; scale: 0.5; top: 190px; } #main.vkuiPanel .vkuiPanel__in > .container-5 { display: flex; flex-direction: column; height: auto; margin-left: 24px; margin-right: 24px; margin-top: 164px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :first-child { border-radius: 20px; height: 100%; width: 100%; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(2) { border-radius: 20px; display: block; height: auto; margin: 30px 0 0; order: 3; position: relative; width: 100%; z-index: 2; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(3) { font-size: 20px; margin: 32px 18px 0; text-align: center; width: auto; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(4) { border-radius: 10px; font-size: 20px; margin: 16px 18px 0; padding: 14px 18px; width: auto; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(5) { gap: 8px; margin: 16px 18px 0; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(5) > :first-child { height: 25px; min-width: 25px; width: 25px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(5) > :first-child > svg { height: 18px; width: 18px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(5) > :last-child { font-size: 16px; line-height: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(6) { gap: 8px; margin: 16px 18px 0; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(6).audio-player > :first-child { height: 36px; min-width: 36px; width: 36px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(6).audio-player > :first-child > svg { height: 24px; width: 24px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(6).audio-player > :nth-child(2) > * { width: 6px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(6).audio-player > :nth-child(3) { font-size: 16px; line-height: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-5 > :nth-child(7) { display: none; } #main.vkuiPanel .vkuiPanel__in > .container-6 { gap: 32px; margin-left: 24px; margin-right: 24px; margin-top: 24px; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child { flex-direction: column; gap: 10px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :first-child { scale: 0.6; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child { gap: 20px; margin-top: -48px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :first-child, #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :nth-child(2) { font-size: 20px; text-align: center; width: 320px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :nth-child(3) { border-radius: 12.5px; gap: 10px; padding: 14px 18px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :nth-child(3) > :first-child { height: 32px; min-width: 32px; width: 32px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :first-child > :last-child > :nth-child(3) > :last-child { font-size: 14px; line-height: 16px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) { gap: 30px 12px; grid-template-columns: repeat(auto-fill, 159px); margin-top: 32px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > *, #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :first-child { gap: 10px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :first-child > :first-child { border-radius: 75px 75px 75px 0; height: 64px; width: 64px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :first-child > :last-child { font-size: 16px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :last-child { gap: 5px; z-index: 1; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :last-child > :first-child { height: 24px; min-width: 24px; width: 24px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(2) > * > :last-child > :first-child > svg { height: 16px; width: 16px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(3) { border-radius: 12.5px; font-size: 24px; margin-top: 64px; padding: 17.5px; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(3) > img[alt="img1"] { left: 2%; scale: 0.5; } #main.vkuiPanel .vkuiPanel__in > .container-6 > :nth-child(3) > img[alt="img2"] { right: 2%; scale: 0.5; } #main.vkuiPanel .vkuiPanel__in > .container-7 { flex-direction: column; gap: 32px; margin-left: 24px; margin-right: 24px; margin-top: 64px; padding-bottom: 0; width: -webkit-fill-available; } #main.vkuiPanel .vkuiPanel__in > .container-7 > svg { display: none; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child { order: 2; width: 100%; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child > :first-child { font-size: 24px; width: auto; word-break: break-word; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child > :nth-child(2), #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child > :nth-child(3) { font-size: 18px; margin-top: 12px; width: auto; word-break: break-word; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :first-child > :nth-child(4) { font-size: 18px; margin-top: 12px; padding: 14px 18px; width: 100%; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :first-child { font-size: 24px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) { margin-top: 18px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) > * { gap: 10px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) > * > :first-child { height: 140px; width: 140px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) > * > :last-child { font-size: 16px; line-height: 20px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > :nth-child(2) > :nth-child(2) > :last-child { margin-left: -25px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > img[alt="heart1"] { left: -20px; scale: 0.4; top: 160px; } #main.vkuiPanel .vkuiPanel__in > .container-7 > img[alt="heart2"] { left: 90%; scale: 0.4; top: 10px; } #main.vkuiPanel .vkuiPanel__in > .footer { align-items: start; flex-direction: column; margin-top: 100px; } #main.vkuiPanel .vkuiPanel__in > .footer > :first-child { margin-left: 30px; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child { flex-direction: column; gap: 24px; margin-left: 30px; margin-top: 32px; } #main.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { gap: 15px; } } body[scheme="bright_light"]:has(#payment) { --background_content: #fff; } #payment.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #payment.vkuiPanel .vkuiPanel__in > .card { background: linear-gradient(71.62deg, #121212 1.39%, #531616 100.21%); border-radius: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 75px; margin: 70px 15vw 0; overflow: hidden; padding: 90px 50px; position: relative; } #payment.vkuiPanel .vkuiPanel__in > .card > .header { align-items: center; display: flex; justify-content: space-between; } #payment.vkuiPanel .vkuiPanel__in > .card > .header > :first-child { color: #fff; } #payment.vkuiPanel .vkuiPanel__in > .card > .header > :last-child { background-color: initial; color: #515180; cursor: pointer; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #payment.vkuiPanel .vkuiPanel__in > .card > .header > :last-child > svg { height: 24px; width: 24px; } #payment.vkuiPanel .vkuiPanel__in > .card > svg { bottom: -500px; left: 0; opacity: 0.5; pointer-events: none; position: absolute; width: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > :not(svg) { z-index: 1; } #payment.vkuiPanel .vkuiPanel__in > .card > .form { align-items: center; display: flex; gap: 80px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child { display: flex; flex-direction: column; gap: 50px; width: 47%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :first-child { align-items: center; display: flex; gap: 20px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :first-child > :first-child { height: 126px; width: 108px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :first-child > :last-child { color: #fff; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child { align-items: center; display: flex; gap: 25px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child > :first-child { color: #fff; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 96px; letter-spacing: -0.03em; line-height: 121px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child > :nth-child(2) { color: #534781; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 48px; letter-spacing: -0.03em; line-height: 60px; text-decoration-line: line-through; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child > :nth-child(3) { background: #e05757; border-radius: 15px; color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; padding: 20px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child { display: flex; flex-direction: column; gap: 30px; width: 53%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :first-child { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(2) { background: #e6e6e6; border: none; border-radius: 0 20px 20px 20px; color: #999; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; height: 80px; letter-spacing: -0.03em; line-height: 25px; outline: none; padding: 0 30px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(4) { align-items: center; display: flex; gap: 20px; margin-top: -15px; width: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(3), #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(4) > * { align-items: center; border-radius: 20px 0 20px 20px; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 20px; gap: 5px; height: 80px; justify-content: center; letter-spacing: -0.03em; line-height: 25px; width: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(3) { background: #e05757; color: #fff; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(4) > :first-child { background: #fddd2d; color: #161321; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(4) > :last-child { background: #fff; color: #000; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(4) > :first-child > img { height: 28px; width: 68px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(4) > :last-child > img { height: 34px; width: 61px; } #payment.vkuiPanel .vkuiPanel__in > .card > .agreement { display: flex; flex-direction: column; gap: 30px; } #payment.vkuiPanel .vkuiPanel__in > .card > .agreement > * { display: flex; gap: 20px; } #payment.vkuiPanel .vkuiPanel__in > .card > .agreement > * > label { color: #534781; font-family: "Wix Madefor Display", var(--font-fallback); font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; } #payment.vkuiPanel .vkuiPanel__in > .card > .agreement > * > label > a { color: #ff8484; text-decoration: none; } #payment.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 15vw; } #payment.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #payment.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #payment.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #payment.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #payment.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #payment.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #payment.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child > :nth-child(2), #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child > :nth-child(3) { display: none; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #payment.vkuiPanel .vkuiPanel__in > .card { gap: 30px; margin: 50px 10px 0; padding: 30px 20px; } #payment.vkuiPanel .vkuiPanel__in > .card > .header > :first-child { height: 18px; width: 154px; } #payment.vkuiPanel .vkuiPanel__in > .card > .header > :last-child { font-size: 20px; } #payment.vkuiPanel .vkuiPanel__in > .card > svg { display: none; } #payment.vkuiPanel .vkuiPanel__in > .card > .form { flex-direction: column; gap: 30px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child { gap: 30px; width: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :first-child { gap: 10px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :first-child > :first-child { height: 94px; width: 80px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :first-child > :last-child { font-size: 28px; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child > :first-child { font-size: 64px; line-height: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child > :nth-child(2) { font-size: 24px; line-height: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :first-child > :last-child > :nth-child(3) { font-size: 16px; line-height: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child { width: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :first-child { font-size: 20px; line-height: 100%; } #payment.vkuiPanel .vkuiPanel__in > .card > .form > :last-child > :nth-child(4) { flex-direction: column; gap: 15px; } #payment.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 40px auto; } #payment.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#payment-form) { --background_content: #fff; } #payment-form.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #payment-form.vkuiPanel .vkuiPanel__in > .card { background: linear-gradient(71.62deg, #121212 1.39%, #531616 100.21%); border-radius: 40px 0 40px 40px; display: flex; gap: 75px; margin: 70px 15vw 0; overflow: hidden; padding: 90px 50px; position: relative; } #payment-form.vkuiPanel .vkuiPanel__in > .card .header { align-items: center; display: flex; justify-content: space-between; } #payment-form.vkuiPanel .vkuiPanel__in > .card .header > :first-child { color: #fff; } #payment-form.vkuiPanel .vkuiPanel__in > .card .header > :last-child { background-color: initial; color: #515180; cursor: pointer; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .header > :last-child > svg { height: 24px; width: 24px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form { width: 500px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :first-child { background: #e05757; border-radius: 0 30px 30px 30px; display: flex; flex-direction: column; gap: 20px; height: 300px; justify-content: flex-end; overflow: hidden; position: relative; width: 100%; z-index: 1; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :first-child > svg { bottom: -700px; left: 50%; opacity: 0.5; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 150%; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :first-child > :not(svg) { z-index: 1; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > * p { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > * input { background: #e6e6e6; border: none; border-radius: 0 20px 20px 20px; color: #999; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; height: 80px; letter-spacing: -0.03em; line-height: 25px; outline: none; padding: 0 30px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :first-child > p { margin-left: 30px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :first-child > input { margin: 0 30px 30px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child { align-items: flex-end; background: #ff8484; border-radius: 0 30px 30px 30px; display: flex; gap: 20px; height: 300px; justify-content: stretch; margin-top: -120px; overflow: hidden; position: relative; width: 100%; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child > * { display: flex; flex-direction: column; gap: 20px; width: calc(50% - 40px); } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child > :first-child { margin-bottom: 30px; margin-left: 30px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child > :last-child { margin-bottom: 30px; margin-right: 30px; } #payment-form.vkuiPanel .vkuiPanel__in > .card > .right { width: calc(100% - 500px); } #payment-form.vkuiPanel .vkuiPanel__in > .card .footer { display: flex; flex-direction: column; gap: 50px; margin-top: 80px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .footer > h1 { color: #fff; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; } #payment-form.vkuiPanel .vkuiPanel__in > .card .footer > span { color: #fff; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 96px; letter-spacing: -0.03em; line-height: 121px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .footer > button { background: #fff; border-radius: 20px 0 20px 20px; color: #261952; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; padding: 30px 50px; } #payment-form.vkuiPanel .vkuiPanel__in > .card > svg { bottom: -500px; left: 0; opacity: 0.5; pointer-events: none; position: absolute; width: 100%; } #payment-form.vkuiPanel .vkuiPanel__in > .card > :not(svg) { z-index: 1; } #payment-form.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 15vw; } #payment-form.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #payment-form.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #payment-form.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #payment-form.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #payment-form.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #payment-form.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #payment-form.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #payment-form.vkuiPanel .vkuiPanel__in > .card { flex-direction: column; gap: 30px; margin: 50px 10px 0; padding: 30px 20px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .header > :first-child { height: 18px; width: 154px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .header > :last-child { font-size: 20px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form { width: 100%; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :first-child, #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child { border-radius: 15px; height: 210px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child { margin-top: -70px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :first-child > p { font-size: 16px; line-height: 20px; margin-left: 15px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > * input { border-radius: 0 10px 10px 10px; height: 60px; padding: 0 20px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child > * { width: calc(50% - 25px); } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child > :first-child { margin-bottom: 15px; margin-left: 15px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child > :last-child { margin-bottom: 15px; margin-right: 15px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .form > :last-child p { font-size: 16px; line-height: 20px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .footer { gap: 30px; margin-top: 0; } #payment-form.vkuiPanel .vkuiPanel__in > .card .footer > h1 { font-size: 28px; line-height: 120%; } #payment-form.vkuiPanel .vkuiPanel__in > .card .footer > span { font-size: 64px; line-height: 81px; } #payment-form.vkuiPanel .vkuiPanel__in > .card .footer > button { font-size: 20px; line-height: 25px; } #payment-form.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 40px auto; } #payment-form.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#payment-status) { --background_content: #fff; } #payment-status.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #payment-status.vkuiPanel .vkuiPanel__in > .card { align-items: center; background: linear-gradient(71.62deg, #121212 1.39%, #531616 100.21%); border-radius: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 50px; margin: 70px 15vw 0; overflow: hidden; padding: 90px 50px; position: relative; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .header { align-items: center; display: flex; justify-content: space-between; width: 100%; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .header > :first-child { color: #fff; height: 27px; width: 210px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .header > :last-child { align-items: center; background: none; color: #515180; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .header > :last-child > svg { height: 24px; width: 24px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > :not(svg) { z-index: 1; } #payment-status.vkuiPanel .vkuiPanel__in > .card > svg { bottom: -700px; left: 50%; opacity: 0.5; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 150%; } #payment-status.vkuiPanel .vkuiPanel__in > .card > h1 { align-items: center; color: #fff; display: flex; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; gap: 40px; justify-content: center; letter-spacing: -0.03em; line-height: 120%; margin-top: 20px; max-width: 640px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > h1 > img { height: 128px; rotate: -4deg; width: 128px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > p { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 130%; max-width: 800px; text-align: center; } #payment-status.vkuiPanel .vkuiPanel__in > .card > p > span { color: #ff8484; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .actions { align-items: center; display: flex; gap: 30px; width: 100%; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .actions > * { align-items: center; border-radius: 20px 0 20px 20px; color: #000; display: flex; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 32px; gap: 15px; height: 120px; justify-content: center; letter-spacing: -0.03em; line-height: 40px; width: 100%; } #payment-status.vkuiPanel .vkuiPanel__in > .card > button { background-color: #fff; border-radius: 20px 0 20px 20px; color: #261952; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; height: 80px; letter-spacing: -0.03em; line-height: 30px; width: 100%; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .actions > * > img { border-radius: 50%; height: 63px; width: 63px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .actions > :first-child { background-color: #e05757; color: #fff; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .actions > :last-child { background-color: #fff; color: #000; } #payment-status.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 15vw; } #payment-status.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #payment-status.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #payment-status.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #payment-status.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #payment-status.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #payment-status.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #payment-status.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #payment-status.vkuiPanel .vkuiPanel__in > .card { gap: 40px; margin: 50px 10px 0; padding: 30px 20px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .header { align-items: center; display: flex; justify-content: space-between; width: 100%; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .header > :first-child { height: 18px; width: 154px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .header > :last-child { font-size: 20px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > svg { display: none; } #payment-status.vkuiPanel .vkuiPanel__in > .card > h1 { flex-direction: column; font-size: 28px; gap: 30px; margin-top: 10px; max-width: none; text-align: center; width: 100%; } #payment-status.vkuiPanel .vkuiPanel__in > .card > h1 > img { height: 90px; width: 90px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > p { font-size: 20px; line-height: 140%; max-width: 800px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .actions { flex-direction: column; gap: 15px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .actions > * { font-size: 20px; gap: 10px; height: 80px; line-height: 25px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > button { font-size: 20px; line-height: 25px; } #payment-status.vkuiPanel .vkuiPanel__in > .card > .actions > * > img { height: 50px; width: 50px; } #payment-status.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 100px 18px 40px; } #payment-status.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#agreement) { --background_content: #fff; } #agreement.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #agreement.vkuiPanel .vkuiPanel__in > .header { align-items: center; display: flex; justify-content: space-between; margin: 52px 360px 0; } #agreement.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 27px; /* width: 210px; */ } #agreement.vkuiPanel .vkuiPanel__in > .header > :last-child { align-items: center; background: none; color: #515180; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #agreement.vkuiPanel .vkuiPanel__in > .header > :last-child > svg { height: 24px; width: 24px; } #agreement.vkuiPanel .vkuiPanel__in > .form { display: flex; flex-direction: column; gap: 80px; margin: 10vh 360px 0; } #agreement.vkuiPanel .vkuiPanel__in > .form block { display: flex; flex-direction: column; gap: 60px; width: 100%; } #agreement.vkuiPanel .vkuiPanel__in > .form h1 { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; line-height: 120%; text-transform: uppercase; -webkit-user-select: text; user-select: text; } #agreement.vkuiPanel .vkuiPanel__in > .form h1 > span { color: #e05757; -webkit-user-select: text; user-select: text; } #agreement.vkuiPanel .vkuiPanel__in > .form h2 { color: #000; font-family: "Wix Madefor Display Extrabold", var(--font-fallback); font-size: 36px; letter-spacing: -0.03em; line-height: 140%; text-transform: uppercase; -webkit-user-select: text; user-select: text; } #agreement.vkuiPanel .vkuiPanel__in > .form p { color: #000; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 170%; -webkit-user-select: text; user-select: text; } #agreement.vkuiPanel .vkuiPanel__in > .form p > a { color: #e05757; cursor: pointer; text-decoration: none; } #agreement.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 360px; } #agreement.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #agreement.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #agreement.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #agreement.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #agreement.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #agreement.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #agreement.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #agreement.vkuiPanel .vkuiPanel__in > .header { margin: 20px 18px 0; } #agreement.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 50px; /* width: 100px; */ } #agreement.vkuiPanel .vkuiPanel__in > .header > :last-child { font-size: 20px; gap: 0; line-height: 25px; } #agreement.vkuiPanel .vkuiPanel__in > .form { gap: 40px; margin: 50px 18px 0; } #agreement.vkuiPanel .vkuiPanel__in > .form block { gap: 30px; } #agreement.vkuiPanel .vkuiPanel__in > .form h1 { font-size: 24px; } #agreement.vkuiPanel .vkuiPanel__in > .form h2 { font-size: 22px; } #agreement.vkuiPanel .vkuiPanel__in > .form p { font-size: 16px; line-height: 150%; } #agreement.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 100px 18px 40px; } #agreement.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#policy) { --background_content: #fff; } #policy.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #policy.vkuiPanel .vkuiPanel__in > .header { align-items: center; display: flex; justify-content: space-between; margin: 52px 360px 0; } #policy.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 27px; width: 210px; } #policy.vkuiPanel .vkuiPanel__in > .header > :last-child { align-items: center; background: none; color: #515180; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #policy.vkuiPanel .vkuiPanel__in > .header > :last-child > svg { height: 24px; width: 24px; } #policy.vkuiPanel .vkuiPanel__in > .form { display: flex; flex-direction: column; gap: 80px; margin: 10vh 360px 0; } #policy.vkuiPanel .vkuiPanel__in > .form block { display: flex; flex-direction: column; gap: 60px; width: 100%; } #policy.vkuiPanel .vkuiPanel__in > .form h1 { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; line-height: 120%; text-transform: uppercase; -webkit-user-select: text; user-select: text; } #policy.vkuiPanel .vkuiPanel__in > .form h1 > span { color: #e05757; -webkit-user-select: text; user-select: text; } #policy.vkuiPanel .vkuiPanel__in > .form h2 { color: #000; font-family: "Wix Madefor Display Extrabold", var(--font-fallback); font-size: 36px; letter-spacing: -0.03em; line-height: 140%; text-transform: uppercase; -webkit-user-select: text; user-select: text; } #policy.vkuiPanel .vkuiPanel__in > .form p { color: #000; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 170%; -webkit-user-select: text; user-select: text; } #policy.vkuiPanel .vkuiPanel__in > .form p > a { color: #e05757; cursor: pointer; text-decoration: none; } #policy.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 360px; } #policy.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #policy.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #policy.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #policy.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #policy.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #policy.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #policy.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #policy.vkuiPanel .vkuiPanel__in > .header { margin: 20px 18px 0; } #policy.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 50px; width: 100px; } #policy.vkuiPanel .vkuiPanel__in > .header > :last-child { font-size: 20px; gap: 0; line-height: 25px; } #policy.vkuiPanel .vkuiPanel__in > .form { gap: 40px; margin: 50px 18px 0; } #policy.vkuiPanel .vkuiPanel__in > .form block { gap: 30px; } #policy.vkuiPanel .vkuiPanel__in > .form h1 { font-size: 24px; } #policy.vkuiPanel .vkuiPanel__in > .form h2 { font-size: 22px; } #policy.vkuiPanel .vkuiPanel__in > .form p { font-size: 16px; line-height: 150%; } #policy.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 100px 18px 40px; } #policy.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#tariffs) { --background_content: #fff; } #tariffs.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #tariffs.vkuiPanel .vkuiPanel__in > .header { align-items: center; display: flex; justify-content: space-between; margin: 52px 360px 0; } #tariffs.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 27px; width: 210px; } #tariffs.vkuiPanel .vkuiPanel__in > .header > :last-child { align-items: center; background: none; color: #515180; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #tariffs.vkuiPanel .vkuiPanel__in > .header > :last-child > svg { height: 24px; width: 24px; } #tariffs.vkuiPanel .vkuiPanel__in > .form { display: flex; flex-direction: column; gap: 80px; margin: 10vh 360px 0; } #tariffs.vkuiPanel .vkuiPanel__in > .form block { display: flex; flex-direction: column; gap: 60px; width: 100%; } #tariffs.vkuiPanel .vkuiPanel__in > .form h1 { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; line-height: 120%; text-transform: uppercase; -webkit-user-select: text; user-select: text; } #tariffs.vkuiPanel .vkuiPanel__in > .form h1 > span { color: #e05757; -webkit-user-select: text; user-select: text; } #tariffs.vkuiPanel .vkuiPanel__in > .form h2 { color: #000; font-family: "Wix Madefor Display Extrabold", var(--font-fallback); font-size: 36px; letter-spacing: -0.03em; line-height: 140%; text-transform: uppercase; -webkit-user-select: text; user-select: text; } #tariffs.vkuiPanel .vkuiPanel__in > .form p { color: #000; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 170%; -webkit-user-select: text; user-select: text; } #tariffs.vkuiPanel .vkuiPanel__in > .form p > a { color: #e05757; cursor: pointer; text-decoration: none; } #tariffs.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 360px; } #tariffs.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #tariffs.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #tariffs.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #tariffs.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #tariffs.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #tariffs.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #tariffs.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #tariffs.vkuiPanel .vkuiPanel__in > .header { margin: 20px 18px 0; } #tariffs.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 50px; width: 100px; } #tariffs.vkuiPanel .vkuiPanel__in > .header > :last-child { font-size: 20px; gap: 0; line-height: 25px; } #tariffs.vkuiPanel .vkuiPanel__in > .form { gap: 40px; margin: 50px 18px 0; } #tariffs.vkuiPanel .vkuiPanel__in > .form block { gap: 30px; } #tariffs.vkuiPanel .vkuiPanel__in > .form h1 { font-size: 24px; } #tariffs.vkuiPanel .vkuiPanel__in > .form h2 { font-size: 22px; } #tariffs.vkuiPanel .vkuiPanel__in > .form p { font-size: 16px; line-height: 150%; } #tariffs.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 100px 18px 40px; } #tariffs.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#unsubscribe) { --background_content: #fff; } #unsubscribe.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #unsubscribe.vkuiPanel .vkuiPanel__in > .header { align-items: center; display: flex; justify-content: space-between; margin: 52px 15vw 0; } #unsubscribe.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 27px; width: 210px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .header > :last-child { align-items: center; background: none; color: #515180; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .header > :last-child > svg { height: 24px; width: 24px; } #unsubscribe.vkuiPanel .vkuiPanel__in > h1 { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; margin: 10vh 15vw 0; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form { background: linear-gradient(71.62deg, #121212 1.39%, #531616 100.21%); border-radius: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 80px; margin: 70px 15vw 0; overflow: hidden; padding: 60px 50px; position: relative; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child { display: flex; gap: 50px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child > * { display: flex; flex-direction: column; gap: 50px; width: 50%; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :not(svg) { z-index: 1; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > svg { bottom: -700px; left: 50%; opacity: 0.5; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 150%; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child > * > h2 { color: #ff8484; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 36px; letter-spacing: -0.03em; line-height: 110%; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child > * > p { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 130%; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child > * > p > span { color: #ff8484; cursor: pointer; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > .actions { display: flex; gap: 50px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > .actions > * { border-radius: 20px 0 20px 20px; color: #261952; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; height: 80px; letter-spacing: -0.03em; line-height: 30px; padding: 0 50px; width: 100%; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > .actions > :not(:last-child) { background-color: #fff; color: #261952; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > .actions > :last-child { background-color: #e05757; color: #fff; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 15vw; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #unsubscribe.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #unsubscribe.vkuiPanel .vkuiPanel__in > .header { margin: 20px 18px 0; } #unsubscribe.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 50px; width: 100px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .header > :last-child { font-size: 20px; gap: 0; line-height: 25px; } #unsubscribe.vkuiPanel .vkuiPanel__in > h1 { font-size: 28px; margin: 50px 18px 0; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form { border-radius: 20px 0 20px 20px; gap: 30px; margin: 29px 18px 0; padding: 30px 20px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child { flex-direction: column; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child > * { gap: 20px; width: 100%; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > svg { display: none; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child > * > h2 { font-size: 24px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > :first-child > * > p { font-size: 16px; line-height: 140%; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > .actions { flex-direction: column; gap: 15px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .form > .actions > * { font-size: 20px; line-height: 25px; padding: 0 20px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 100px 18px 40px; } #unsubscribe.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#unsubscribe-form) { --background_content: #fff; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .header { align-items: center; display: flex; justify-content: space-between; margin: 52px 15vw 0; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 27px; width: 210px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .header > :last-child { align-items: center; background: none; color: #515180; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .header > :last-child > svg { height: 24px; width: 24px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > h1 { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; margin: 10vh 15vw 0; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form { grid-gap: 50px; background: linear-gradient(71.62deg, #121212 1.39%, #531616 100.21%); border-radius: 40px 0 40px 40px; display: grid; gap: 50px; grid-template-columns: repeat(2, minmax(20vw, 1fr)); margin: 70px 15vw 0; overflow: hidden; padding: 60px 50px; position: relative; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > :not(svg):not(button) { display: flex; flex-direction: column; gap: 30px; justify-content: end; z-index: 1; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > svg { bottom: -700px; left: 50%; opacity: 0.5; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 150%; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > * > p { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > * > input { background: #e6e6e6; border: none; border-radius: 0 20px 20px 20px; color: #999; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; height: 80px; letter-spacing: -0.03em; line-height: 25px; outline: none; padding: 0 30px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > button { background-color: #e05757; border-radius: 20px 0 20px 20px; color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; height: 80px; letter-spacing: -0.03em; line-height: 30px; margin-top: 30px; width: calc(70vw - 100px); z-index: 1; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 15vw; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #unsubscribe-form.vkuiPanel .vkuiPanel__in > .header { margin: 20px 18px 0; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 50px; width: 100px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .header > :last-child { font-size: 20px; gap: 0; line-height: 25px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > h1 { font-size: 28px; margin: 50px 18px 0; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form { border-radius: 20px 0 20px 20px; display: flex; flex-direction: column; gap: 30px; margin: 29px 18px 0; padding: 30px 20px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > :not(svg) { gap: 15px; width: 100%; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > svg { display: none; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > * > p { font-size: 20px; line-height: 25px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .form > * > input { font-size: 20px; line-height: 25px; padding: 0 20px; width: auto; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 100px 18px 40px; } #unsubscribe-form.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#unsubscribe-hint) { --background_content: #fff; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .header { align-items: center; display: flex; justify-content: space-between; margin: 52px 15vw 0; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 27px; width: 210px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .header > :last-child { align-items: center; background: none; color: #515180; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .header > :last-child > svg { height: 24px; width: 24px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > h1 { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; letter-spacing: -0.03em; line-height: 120%; margin: 10vh 15vw 0; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form { background: linear-gradient(71.62deg, #121212 1.39%, #531616 100.21%); border-radius: 40px 0 40px 40px; display: flex; flex-direction: column; gap: 50px; margin: 70px 15vw 0; overflow: hidden; padding: 60px 50px; position: relative; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > :not(svg) { z-index: 1; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > svg { bottom: -700px; left: 50%; opacity: 0.5; pointer-events: none; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 150%; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > h2 { color: #fff; font-family: "Wix Madefor Display Bold", var(--font-fallback); font-size: 36px; letter-spacing: -0.03em; line-height: 110%; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > p { color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form span { color: #ff8484; cursor: pointer; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > button { background-color: #e05757; border-radius: 20px 0 20px 20px; color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; height: 80px; letter-spacing: -0.03em; line-height: 30px; margin-top: 20px; width: calc(70vw - 100px); } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 15vw; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .header { margin: 20px 18px 0; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 50px; width: 100px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .header > :last-child { font-size: 20px; gap: 0; line-height: 25px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > h1 { font-size: 28px; margin: 50px 18px 0; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form { border-radius: 20px 0 20px 20px; display: flex; flex-direction: column; gap: 30px; margin: 29px 18px 0; padding: 30px 20px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > svg { display: none; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > h2 { font-size: 24px; line-height: 120%; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > p { font-size: 16px; line-height: 150%; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .form > button { font-size: 20px; margin-top: 0; width: 100%; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 100px 18px 40px; } #unsubscribe-hint.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } body[scheme="bright_light"]:has(#admin) { --background_content: #fff; } #admin.vkuiPanel .vkuiPanel__in > svg { position: fixed; width: 100vw; z-index: -1; } #admin.vkuiPanel .vkuiPanel__in > .header { align-items: center; display: flex; justify-content: space-between; margin: 52px 360px 0; } #admin.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 27px; width: 210px; } #admin.vkuiPanel .vkuiPanel__in > .header > :last-child { align-items: center; background: none; color: #515180; display: flex; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; gap: 10px; letter-spacing: -0.03em; line-height: 30px; } #admin.vkuiPanel .vkuiPanel__in > .header > :last-child > svg { height: 24px; width: 24px; } #admin.vkuiPanel .vkuiPanel__in > .form { display: flex; flex-direction: column; gap: 80px; margin: 10vh 360px 0; } #admin.vkuiPanel .vkuiPanel__in > .form block { display: flex; flex-direction: column; gap: 20px; width: 100%; } #admin.vkuiPanel .vkuiPanel__in > .form block input { background: #e6e6e6; border: none; border-radius: 0 20px 20px 20px; color: #999; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; height: 80px; letter-spacing: -0.03em; line-height: 25px; outline: none; padding: 0 30px; } #admin.vkuiPanel .vkuiPanel__in > .form block button { background: #261952; border-radius: 20px 0 20px 20px; color: #fff; font-family: "Wix Madefor Display Semibold", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 30px; padding: 30px 50px; } #admin.vkuiPanel .vkuiPanel__in > .form h1 { color: #000; font-family: "Dela Gothic One", var(--font-fallback); font-size: 48px; font-style: normal; font-weight: 400; line-height: 120%; text-transform: uppercase; -webkit-user-select: text; user-select: text; } #admin.vkuiPanel .vkuiPanel__in > .form h1 > span { color: #e05757; -webkit-user-select: text; user-select: text; } #admin.vkuiPanel .vkuiPanel__in > .form h2 { color: #000; font-family: "Wix Madefor Display Extrabold", var(--font-fallback); font-size: 36px; letter-spacing: -0.03em; line-height: 140%; text-transform: uppercase; -webkit-user-select: text; user-select: text; } #admin.vkuiPanel .vkuiPanel__in > .form p { color: #000; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 24px; letter-spacing: -0.03em; line-height: 170%; -webkit-user-select: text; user-select: text; } #admin.vkuiPanel .vkuiPanel__in > .form p span { color: #e05757; -webkit-user-select: text; user-select: text; } #admin.vkuiPanel .vkuiPanel__in > .footer { display: flex; justify-content: space-between; margin: 70px 360px; } #admin.vkuiPanel .vkuiPanel__in > .footer > * { display: flex; flex-direction: column; gap: 30px; } #admin.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) { color: #e05757; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #admin.vkuiPanel .vkuiPanel__in > .footer > * > p:not(:has(span)) { color: #636681; font-family: "Wix Madefor Display Medium", var(--font-fallback); font-size: 20px; letter-spacing: -0.03em; line-height: 25px; } #admin.vkuiPanel .vkuiPanel__in > .footer > * > p:has(span) > span { color: #636681; } #admin.vkuiPanel .vkuiPanel__in > .footer > :first-child > :not(:last-child) > span { -webkit-user-select: all; user-select: all; } #admin.vkuiPanel .vkuiPanel__in > .footer > :first-child > :last-child, #admin.vkuiPanel .vkuiPanel__in > .footer > :last-child > * { cursor: pointer; } @media screen and (max-width: 630px), screen and (orientation: portrait) { #admin.vkuiPanel .vkuiPanel__in > .header { margin: 20px 18px 0; } #admin.vkuiPanel .vkuiPanel__in > .header > :first-child { color: #323443; height: 50px; width: 100px; } #admin.vkuiPanel .vkuiPanel__in > .header > :last-child { font-size: 20px; gap: 0; line-height: 25px; } #admin.vkuiPanel .vkuiPanel__in > .form { gap: 10px; margin: 50px 18px 0; } #admin.vkuiPanel .vkuiPanel__in > .form block { gap: 30px; } #admin.vkuiPanel .vkuiPanel__in > .form h1 { font-size: 24px; } #admin.vkuiPanel .vkuiPanel__in > .form h2 { font-size: 22px; } #admin.vkuiPanel .vkuiPanel__in > .form p { font-size: 16px; line-height: 150%; } #admin.vkuiPanel .vkuiPanel__in > .footer { flex-direction: column; gap: 40px; margin: 100px 18px 40px; } #admin.vkuiPanel .vkuiPanel__in > .footer > * { gap: 20px; } } /*# sourceMappingURL=main.91c8c7a0.css.map*/